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

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

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

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

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

Part:-7

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

render property of view

“render” is one property of “View” in Backbone.js. It’s like normal function in Backbone.js. when we call render property associated with object in Backbone.js, it get call and execute the function associated with it. In below example we have implemented sample “render” property in Backbone.js.

<%@ 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 person = Backbone.View.extend({
                render: function (){
                    console.log('Render method called');
                }
            });
            var p = new person();
            p.render();
        </script>
    </form>
</body>
</html>

Here is output of above example.


template property of view

Like “render” property “template” is also another one. This property is useful to load any inline or external template in Backbone.js view. To implement template property we can use “underscore.js”. Here we are loading one “<p>” tag to template property.

In this article we will learn the template property of

<%@ 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"></p>
 
        <script>
            var person = Backbone.View.extend({
                el: 'viewEL',
                template : _.template('<p> This is paragraph </p>'),
                render: function (){
                    $('#' + this.el).html(this.template());
                }
            });
 
            var p = new person();
            p.render();
 
        </script>
    </form>
</body>
</html>

We are loading template property to “el” property and the output is here.


tagName property in view

tagName property takes one DOM id or class identifier as value and we can display template property into it.

<%@ 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 person = Backbone.View.extend({
                tagName:'viewEL',
                template : _.template('<p> This is paragraph on tahName element</p>'),
                render: function (){
                    $('#' + this.tagName).html(this.template());
                }
            });
 
            var p = new person();
            p.render();
 
        </script>
    </form>
</body>
</html>

Here is output of above example.


Conclusion

In this article we have learned few important properties of “View” in Backbone.js. Hope you have enjoyed it. Happy Backbone learning.

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)