Introduction
Welcome to the "Demonstrating Backbone.js" article series. This article demonstrates how to create and use a View in Backbone.js. This article starts with the concept of Backbone.js and various components of it. Previous articles have provided an introduction to Views in Backbone.js. You can get them from the following:
In this article we will see how the views will listen to the events in backbone.js.
Views listening to Events
Here we have created a method called "render" and if we add a click event then it will click on the container. And we added a selector called a button that is a context of the container.so when we click on the button it will call render and if we click on any other button on the page then it won’t do anything.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
#container {
padding: 20px;
border: 1px solid #333;
width: 400px;
}
#list-template {
display: none;
}
</style>
<script src="backbone/Jquery.js"></script>
<script src="backbone/underscore-min.js"></script>
<script src="backbone/backbone-min.js"></script>
</head>
<body>
<div id="container">
<button>
Load</button>
<ul id="list">
</ul>
</div>
<div id="list-template">
<li><a href="" temp_href=""></a></li>
</div>
<form id="form1" runat="server">
<script>
model = new Backbone.Model({
data: [{ text: "csharpcorner", href: "http://csharpcorner.com" }, { text: "ASP.NET", href: "http://asp.net/" }, { text: "Ramasagar", href: "http://ramasagar.com"}]
});
var View = Backbone.View.extend({
initialize: function () {
},
el: '#container',
events: {
"click button": "render"
},
render: function () {
}
});
var view = new View({ model: model });
</script>
</form>
</body>
</html>
Now let’s go to the template. Here we have created a variable for our template using:
this.template= $ {#list-template"}.children();
Now we will see how to use render. First we will get the data from the model. I just pulled the data straight out of the model using:
var data=this.model.get{'data'};
And then we will bind to the clone the li element over and over again and then append to the list so we set up a normal "for" loop.
The following is the complete code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
#container {
padding: 20px;
border: 1px solid #333;
width: 400px;
}
#list-template {
display: none;
}
</style>
<script src="backbone/Jquery.js"></script>
<script src="backbone/underscore-min.js"></script>
<script src="backbone/backbone-min.js"></script>
</head>
<body>
<div id="container">
<button>
Load</button>
<ul id="list">
</ul>
</div>
<div id="list-template">
<li><a href="" temp_href=""></a></li>
</div>
<form id="form1" runat="server">
<script>
model = new Backbone.Model({
data: [{ text: "csharpcorner", href: "http://csharpcorner.com" }, { text: "ASP.NET", href: "http://asp.net/" }, { text: "Ramasagar", href: "http://ramasagar.com"}]
});
var View = Backbone.View.extend({
initialize: function () {
this.template = $('#list-template').children();
},
el: '#container',
events: {
"click button": "render"
},
render: function () {
var data = this.model.get('data');
for (var i = 0, l = data.length; i < l; i++) {
var li = this.template.clone().find('a').attr('href', data[i].href).text(data[i].text).end();
this.$el.find('ul').append(li);
}
}
});
var view = new View({ model: model });
</script>
</form>
</body>
</html>
Output
![Views listening to Events]()
Summary
In this article, I explained how the views will listen to the events. In future articles we will understand more about Views with examples.
Previous article: Demonstrating Backbone.js: Implement View Part 1
Next article: Demonstrating Backbone.js: Implement View Part 3