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.

Previous article: Demonstrating Backbone.js: Implement View
Next article: Demonstrating Backbone.js: Implement View Part 2