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

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

In this article we will understand the concept of view in Backbone.js

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

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

part -6

In this article we will understand few more concepts of “view” in Backbone.js. Try to understand below examples.

Define function within view 

We can define any function within “view” in Backbone.js. In below example we have defined “myfunction” within “TestView” view then we are calling this “myfunction” function from initialize constructor. 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">
        <script>
            var TestView = Backbone.View.extend({
                initialize: function () {
                    this.myfunction();
                },
                myfunction: function () {
                    console.log('Call by initialize constructor');
                }
            });
            var myview = new TestView();
        </script>
    </form>
</body>
</html>

This is output of above example.


Print model data within View’s method

In above example we have learned to implement function within “view”. In this example we will print Model data within “view”. If you know the concept of Model in Backbone.js then you will understand easily.

<%@ 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">This is paragraph element</p>
 
        <script>
           
            var person = Backbone.Model.extend({
                defaults: {
                    name: '',
                    surname:''
                }
            });
 
            var TestView = Backbone.View.extend({
                initialize: function () {
                    var p = new person({ name: 'Sourav', surname: 'Kayal' })
                    this.myfunction(p);
                },
                myfunction: function (Model) {
                    console.log(Model.get('name'));
                    console.log(Model.get('surname'));
                }
 
            });
           
            var myview = new TestView();
           
 
        </script>
    </form>
</body>
</html>

We are creating object of person Model within initialize constructor of “TestView” view. Then we are calling “myfunction” and passing the Model object as argument.


Print collection using view’s function

Like above example we can pass a Collection of Backbone.js Mode as function parameter. This example is very similar with previous one.

<%@ 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">This is paragraph element</p>
 
        <script>
           
            var person = Backbone.Model.extend({
                defaults: {
                    name: '',
                    surname:''
                }
            });
 
            var TestView = Backbone.View.extend({
                initialize: function () {
 
                    //create object of person model
                    var p1 = new person({ name: 'Sourav', surname: 'Kayal' })
                    var p2 = new person({ name: 'Ajay', surname: 'Joshi' })
                    var persocollection = Backbone.Collection.extend({
                        model:person
                    });
 
                    //create object of persocollection Collection
                    var p = new persocollection();
                    p.add(p1);
                    p.add(p2);
 
                    this.myfunction(p);
                },
                myfunction: function (Collection) {
 
                    //Traverse all element using each method
                    Collection.each(function (object) {
                        console.log(object.get('name') +' ' + object.get('surname'));
                    });
                }
            });
            var myview = new TestView();
           
 
        </script>
    </form>
</body>
</html>

Here is output of above example.


Conclusion:-

In this article we have learned to work with Model data within view in Backbone.js. This is very important to implement single page application suing Backbone.js. In coming article we will discuss few more concepts.

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)