Demystify Backbone.js: View in Backbone.js-Part-6

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 2342 red flag

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.

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)