In this article we will try to understand the concept of view in Backbone.js
Demystify Backbone.js: View in Backbone.js-Part-1
This is Backbone.js article series. In this series we are
learning Backbone.js from scratch. We have discussed the concepts of Model and
Collection in Backbone.js, you can read them here.
Part-1
Part-2
Part-3
Part-4
Part-5
In this article we will understand the concept of “view” in
Backbone.js. If you have concept of MVC architecture then probably you know the
basic idea behind view creation. In Backbone.js the concept of view is very
similar with traditional MVC pattern but the difference is there. Rather than it’s like simple .html page, it much
similar with Class and Collection in Backbone.js.
The view is used to handle display mechanism. In below
example we will implement few example of views, try to understand them.
Create simple view and call constructor method.
As we have discussed, view is very similar to Model and Collection.
We can define constructor within view. In below example we have created
“TestView” which is extended from View class of Backbone.js library. Try to
understand below example.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<head runat="server">
<script type="text/javascript" src="backbone/Jquery.js"></script>
<script type="text/javascript" src="backbone/underscore-min.js"></script>
<script type="text/javascript" src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script>
var TestView = Backbone.View.extend({
initialize: function() {
console.log('View Initialize');
}
});
var myview = new TestView();
</script>
</form>
</body>
</html>
Here is sample output of above example.
el property of
Collection / Set data to el property and read data from it
As view is very similar with Model and Collection, it holds
few properties. “el” is one property of view which contains any id or class name
of any DOM element. We can set any other DOM element to el property or we can
retrieve any element from it. Here is suitable example.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="backbone/Jquery.js"></script>
<script type="text/javascript" src="backbone/underscore-min.js"></script>
<script type="text/javascript" src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<p id="viewEL"></p>
<script>
var TestView = Backbone.View.extend({
el:'viewEL',
initialize: function () {
$('#'+ this.el).text('This is appended within constructor');
}
});
var myview = new TestView();
</script>
</form>
</body>
</html>
In this page we have defined of id of <div> element in
“el” property and within initialize we are setting text to it. Here is sample
output.
Read data from el property
In above example we have seen to set data to “el” property
of view, in this example we will get data from “el” property. Here is sample
implementation.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<head runat="server">
<script type="text/javascript" src="backbone/Jquery.js"></script>
<script type="text/javascript" src="backbone/underscore-min.js"></script>
<script type="text/javascript" src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<p id="viewEL">This is paragraph element</p>
<script>
var TestView = Backbone.View.extend({
el:'viewEL',
initialize: function () {
console.log( $('#'+ this.el).text());
}
});
var myview = new TestView();
</script>
</form>
</body>
</html>
We are getting value from “el” property. Here is sample
output.
Conclusion:-
In this article we have learned few property of “view” in
Backbone.js. In next few articles we will learn more about “view”. Keep
following this series.