Introduction
This chapter demonstrates about the Backbone.js View is used to specify the how the data looks like and how they represents models data to the users and following are the concepts covered in this chapter.
- Backbone.js View
Description
The Backbone.js Views specify however the data will appears and how They represent model's data to the users. they'll be used with any JavaScript template library. Which handle users input events, bind events and strategies, render model and assortment and move with users. The table below demonstrates the methods which user can be used to manipulate the Backbone.js views.
| method | Description |
|---|---|
| extend | Which is used to extend backbone.view class to create some custom view class. |
| initilize | Which is used to initialise the view by using the new keyboard. |
| $el | Which is used to represent the jQuery object for the view's element. |
| el | Is used to define which element used for the view reference. |
| attributes | Which can be used as DOM element attributes on the view class. |
| setElement | Is used to specify the existing DOM elements into different DOM elements. |
| $(jQuery) | Is used as a selector which contain $ function and runs some queries within the view's element. |
| render | Which contains rendering template logic. |
| remove | Is used to remove a view from DOM. |
| template | Template creates some markup reusable copies of and provides instance data access while rendering the view. |
| deligateEvents | Inorder to handle the events which bind elements to the specific DOM elements with call back methods. |
| undeligateEvents | Is used to remove delegate events from the view. |
Backbone.js extend method is used extend the Backbone.js class to create some custom events and the syntax below demonstrates the Backbone.js extend().
[code]
Backbone.View.extend(properties, [classProperties])
[/code]
Parameters
The code below demonstrates the Backbone.js extend().
[html]
<!DOCTYPE html>
<head>
<title>View Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/javascript">
var ViewDemo = Backbone.View.extend({
el: $('#mydiv'),
template: _.template("SPLESSONS <%= tagline %>"),
initialize: function(){
this.render();
},
render: function(){
this.$el.html(this.template({tagline: 'A solution of all technology...'}));
}
});
var myview = new ViewDemo();
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- properties Which specify Instance properties for view class.
- classProperties Which specify some class properties attached to the views constructor function.
If the view is first created then Backbone.js initialize will be called which initialize the view which is called by using the new keyword and it is one of the special options those are directly attached to the view and the syntax below demonstrates the Backbone.js initialize()
[code]
new View(options)
[/code]
Parameters
The code below demonstrates the Backbone.js initialize().
[html]
<!DOCTYPE html>
<head>
<title>View Initialize Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var ViewDemo = Backbone.View.extend({
initialize:function(){
document.write('SPLESSONS is the best online tutorial website for all techologies.');
}
});
var myview = new ViewDemo();
</script>
</body>
</html>
new View(options)
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- option Which is an optional? which can be a collection, model, id, class name, attribute, tag name, and events.
Backbone.js $el method which is used to specify cached Query object for a view?s element by using which method user no need to re-warp the DOM element all the time.
[code]
view.$el
[/code]
el
By using Backbone.js el method user can define the element which is used as the view reference. this.el can be created by using the view's tagName, id, className and attribute properties, if specified. if not, el is an empty div. The code below demonstrats the Backbone.js el.
[code]
view.el
[/code]
Parameters
The code below demonstrates the Backbone.js el().
[html]
<!DOCTYPE html>
<head>
<title>View el Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
ViewDemo = Backbone.View.extend({
initialize: function(){
document.write("el property is defined..");
}
});
var viewdemo = new ViewDemo({ el: $("myapp") });
</script>
<body>
<div id="myapp"></div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- properties Which specify Instance properties for view class.
- classProperties Which specify some class properties attached to the views constructor function.
Backbone.js attribuetes specifies a hash attributes which may contain HTML DOM elements attributes on the view's el or function which returns such as has the syntax below demonstrates the backbone.js attributes.
[code]
view.attributes
[/code]
The code below demonstrates the Backbone.js attributes().
[html]
<!DOCTYPE html>
<head>
<title>View Attributes Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<div id="myapp"></div>
<script type="text/javascript">
var MyModel = Backbone.Model.extend({
defaults: {
name: "John Davison"
}
});
var ViewDemo = Backbone.View.extend({
initialize: function () {
document.write("View is initialized..."+"<br>");
document.write("My site name is: ",this.model.get("Site")+"<br>");
document.write("My tag name is: ",this.tagName+"<br>");
document.write("My class name is: ",this.className);
},
});
$(function () {
var mymodel = new MyModel({ Site: "JavaTpoint" });
var myview = new ViewDemo({ model: mymodel, tagName: "mytag", className: "myclass"});
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
By using Backbone.js setElement user can apply backbone view to other DOM elements which is also create catched $el referance and displays the view delegated events from the previous element to the present one.
[code]
view.setElement(element)
[/code]
Parameters
The code below demonstrates the Backbone.js setElement().
[html]
<!DOCTYPE html>
<head>
<title>View setElement Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<div id="myview">
Enter any text: <input type="text"/>
</div>
<div id="myapp"></div>
<script type="text/javascript">
var ViewDemo = Backbone.View.extend({
events: {
'change input': 'sayHi'
},
initialize: function() {
this.setElement($('#myview'));
},
sayHi: function() {
document.write('SPLESSONS: A solution of all technology...');
}
});
var viewdemo = new ViewDemo;
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
If user entered any text then press enter is as shown in below image.
- element Which specify an element which can be changed from present element to another element.
By using Backbone.js $(jQuery) method user can run the queries scoped with inthe view's element after t using the method user doesn't use model id's with in the query to fetch specify elements in a list and which rely on HTML class attributes.
[code]
view.$(selector)
[/code]
Parameters
The code below demonstrates the Backbone.js $(jQuery)().
[html]
<!DOCTYPE html>
<head>
<title>View $(jQuery) Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<div id="myVal">
<button id="button" data-test="">Click Me</button>
</div>
<span id="myLog"></span>
<script type="text/javascript">
var myLog = $('#mydata');
var data = function(val) {
document.write(val);
};
var ViewDemo = Backbone.View.extend({
events: {
'click [data-test]' : 'myFunc1',
'click *[data-test]': 'myFunc2',
},
el: $('#myVal'),
myFunc1: function () {
data('Welcome to SPLESSONS');
},
myFunc2: function () {
data(': A solution of all technology...');
}
});
var myview = new ViewDemo();
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
If user clicked on Click me button a message will appear is as shown in below image.
- selector Is used to specify the different types of selectors i.e id or class.
Backbone.js render () method override itself with the updated code which is used to render the view template from model data and updates with present HTML which contains logic for the rendering template which constructs the view.
[code]
view.render()
[/code]
The code below demonstrates the Backbone.js render().
[html]
<!DOCTYPE html>
<head>
<title>View Render Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/javascript">
var ViewDemo = Backbone.View.extend({
el: $('#mydiv'),
template: _.template("SPLESSONS <%= tagline %>"),
initialize: function(){
this.render();
},
render: function(){
this.$el.html(this.template({tagline: 'A solution of all Technology...'}));
}
});
var myview = new ViewDemo();
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
By using the Backbone.js remove () method user can remove the view from DOM then it calls stopListening to remove bound events which the view has listenTo the syntax below demonstrates the remove () method.
[code]
view.remove()
[/code]
The code below demonstrates the Backbone.js remove().
[html]
<!DOCTYPE html>
<head>
<title>View Remove Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/javascript">
var ViewDemo = Backbone.View.extend({
events: {'click button': 'removeFunc'
},
removeFunc: function () {
this.remove();
document.write("After removing, view becomes: ",$('#mydiv').length);
},
render: function () {
this.$el.html('<button>click to remove</button>');
},
initialize:function(){this.render();}
});
var myview = new ViewDemo({el: '#mydiv'});
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
User can remove by clicking click to remove is as shown below image.
Backbone.js template () method is used to create reusable copies of markup and provided instance data access which is nice convention to demonstrate a template function on user views.
[code]
view.template(data)
[/code]
The code below demonstrates the Backbone.js template().
[html]
<!DOCTYPE html>
<head>
<title>View Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/javascript">
var ViewDemo = Backbone.View.extend({
el: $('#mydiv'),
template: _.template("SPLESSONS <%= tagline %>"),
initialize: function(){
this.render();
},
render: function(){
this.$el.html(this.template({tagline: 'A solution of all technology...'}));
}
});
var myview = new ViewDemo();
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Backbone.js views specify how the data looks like.
- Views represent the model data to the user.