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.