Introduction
Welcome to the "Demonstrating Backbone.js" article series. This article starts with the concept of Backbone.js and various components of it. Previous articles have provided an introduction to views and the implementation of views. You can get them from the following:
Using render property of View
In the following snippet we have implemented a sample “render” property in Backbone.js.
<%@ 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">
<script>
var Product = Backbone.View.extend({
render: function () {
console.log('Iam Render Method in Backbone.js');
}
});
var p = new Product();
p.render();
</script>
</form>
</body>
</html>
Output
![render property of View]()
Using Tagname and Class name
The tagName is used to build the view “el” property. The “el” property represents the element that will be added to the DOM. The tagName is defaulted to the “div” string.
The className is also used to build the view “el” property. By default the className is undefined.
In the following snippet we can see that “this.el” represents an element with the tag “div”.
Model tagName and className are auto assigned based on the value passed in when the object was created
<%@ 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">
<script>
//create a Product Model class
var Product = Backbone.Model.extend({
defaults: {
rating: "NR"
},
initialize: function () {
console.log("Product Model created");
}
});
var ProductView1 = Backbone.View.extend({
tagName: "span",
className: "important",
initialize: function () {
console.log("ProductView initialize");
console.log(this.model.get("title"));
console.log(this.tagName);
console.log(this.className);
console.log(this.el);
console.log(this.$el);
console.log(this.myValue);
},
});
$(function () {
var product = new Product({ title: "Iphone" });
var productView1 = new ProductView1({ model: product, tagName: "li", className: "critical", myValue: "Some Value" });
})
</script>
</form>
</body>
</html>
Output
![Tagname and Class name]()
Since my value is the custom property it was undefined.
Summary
In this article, I explained how to use render, tagname and classname in Backbone views. In future articles we will understand more about Views with examples.
Previous article: Demonstrating Backbone.js: Implement View Part 3
Next article: Demonstrating Backbone.js: Implement View Part 5