Demonstrating Backbone.js: Implement View Part 1

Introduction

Welcome to the "Demonstrating Backbone.js" article series. This article demonstrates how to create and use a View in Backbone.js. The previous article provided an introduction to Views in Backbone.js. You can get it from the following:

Demonstrate Backbone.js: Implement View

Using el property

Here we have use "el:" to tell the DOM element that it should access the view. If we want to use  a pre-existing element (container) then we will use "el:". Here we have supplied a string that has the selector we want to use.

We can use the jQuery object "$" or "document.getElementById", anything that will work, we just need to send it through "el:" that will become our element.

<%@ 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">

    <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://www.c-sharpcorner.com/" },

{ text: "ASP.NET", href: "http://www.asp.net/" },

{ text: "RamaSagar", href: "http://ramasagar.com" }

]

        });

        var View = Backbone.View.extend({

            initialize: function () {

            }

        });

        var view = new View({ el: document.getElementById("container") });

    </script>

    </form>

</body>

</html>

 
Here if we want to create a new DOM element then we can use a few things, like tagname, className, id and atributes. If we use these things then the constructor automatically creates an element based upon the data we have sent.
 

<%@ 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">

    <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://www.c-sharpcorner.com/" },

{ text: "ASP.NET", href: "http://www.asp.net/" },

{ text: "RamaSagar", href: "http://ramasagar.com" }

]

});

var View = Backbone.View.extend({

initialize: function () {

}

});

var view = new View({ tagname, className, id, attributes});

    </script>

    </form>

</body>

</html>

 
Read data from "el" property
 

<%@ 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">

    <script src="backbone/Jquery.js"></script>

    <script src="backbone/underscore-min.js"></script>

    <script src="backbone/backbone-min.js"></script>

</head>

<body>

    <form id="form1" runat="server">

    <p id="Sampleview">

        Welcome to csharp corner</p>

    <script>

        var View = Backbone.View.extend({

            el: 'Sampleview',

            initialize: function () {

                console.log($('#' + this.el).text());

            }

        });

        var myview = new View();

    </script>

    </form>

</body>

</html>

 
Output


Summary

In this article, I explained how to use the "el" property in Backbone.js. In future articles we will understand more about views with examples. I hope you have liked it. Happy coding.