Post
Ask Question

Working With Backbone.JS View : Part 5

Welcome to another article of the Backbone.JS series. In the previous articles we saw: 
Backbone.View

This article explains Backbone Views. As we know Views provide us a way to display our data. In other words we can say that a views is just like controllers in the MVC pattern that interact with a model. It basically takes the user events (for example clicks, key press and so on) and renders the view. A view's render function can be bound to the model's "change" event. To display the model data,we need to create a model containig the data. We already learned how to create a model in previous articles. Let's create a model.
  1. Employee = Backbone.Model.extend({  
  2. defaults: {  
  3. name: 'abc',  
  4. age : 24,  
  5. position : 'Developer'  
  6. },  
  7. });  
extend
Backbone.View.extend(properties, [classProperties])

So we have just created a model, let's create a view for the preceding model, every model data is displayed in the tagName provided. In views the default tagName is "div". We can use other tagName to display data like we can add a list as a "li" tag.
  1. var EmployeeView = Backbone.View.extend({ // view created  
  2. tagName: 'div'  
  3. });  
el
view.el

el defines the view for the object. By default it is an empty div. It refers to the HTML element, by which we can access the HTML element and its properties. All views have DOM elements. this.el can be created from an id, className, tagName and attributes properties. Let us use an example as in the following:
  1. Employee = Backbone.Model.extend({  
  2.   
  3. defaults: {  
  4. name: 'abc',  
  5. age : 24,  
  6. position : 'Developer'  
  7. },  
  8.   
  9.   
  10. });  
The Console Output looks as in:

 
As explained earlier, we can add id, className and attributes just like we did with tagName in the preceding example.
  1. var EmployeeView = Backbone.View.extend({ // view created  
  2. tagName: 'div',  
  3. className: 'employee',  
  4. id: 'emp_id'  
  5. });  
$el
view.$el

$el is basically a jQuery object for the element of the view. It holds the reference to our element and due to this we don't need to traverse the DOM to find the element everytime we use that element.
constructor / initialize
new View([options])

Backbone will automatically call an initialize function when instantiating a Backbone view. This acts as a constructor for a class.
  1. initialize: function(){  
  2.   
  3. }  
render
view.render()

The output for the data for the model is rendered by the method provided by Backbone to the view, render(). It adds content to the view.
  1. render: function() {  
  2. }  
Let's use an example to show the previously shown initialize and render.
  1. Employee = Backbone.Model.extend({  
  2.   
  3. defaults: {  
  4. name: 'abc',  
  5. age : 24,  
  6. position : 'Developer'  
  7. },  
  8.   
  9.   
  10. });  
  11. var EmployeeView = Backbone.View.extend({ // view created  
  12. initialize: function(){  
  13. this.render();  
  14. },  
  15.   
  16. render: function(){  
  17.   
  18. $(this.el).html('<li>'+this.model.get('name')+ this.model.get('age')+ this.model.get('position')+'</li>');  
  19. }  
  20. });  
  21. var employee = new Employee;  
  22. var employeeView = new EmployeeView({model:employee});  
  23. employeeView.el;  
  24. var employee = new Employee({ name: "iShriss", age: 24, position: "Developer" })  
  25.   
  26. var employeeView = new EmployeeView({ model: employee });  
  27. employeeView.el;  
  28. $(document.body).html(employeeView.el);  
Explaination
In the preceding piece of code I created a view, employeeView, to the model, employee, and tried to use initialize, render and tagName Backbone View keywords here. Well this is a very simple code, the initialize function will call the employeeView initialization that further invokes the render method. The render method is responsible for the rendering of the model data, the employee data in the employeeView.
View Instantiation -> initialize function -> render method -> View

Here is how it works.
In the Console:
 
 
remove
view.remove()

Backbone provides a remove function to remove the view from the DOM. This can be done by simply calling the remove method [view.remove()]. Here in the preceding code, we have a view named employeeView. If we wish to remove it from what we call the DOM we need to call the remove function.
  1. employeeView.remove(); //removes view from DOM  
setElement
view.setElement(element)
 
setElement just moves the view's delegated events to a new element from the old element, by applying the Backbone view to the different DOM element. It also creates the cached $el reference.
template
view.template([data])

template is used to access instance data during view rendering. Templating of a view isn't a function provided by Backbone, but it the nice way to define a template funtion in our view. For example:
  1. var employeeView = Backbone.View.extend({  
  2. template: _.template(...)  
  3. });  
Summary

This article explained Backbone Views and its methods and how they actually work. I hope you have gotten a basic overview of Backbone Views.
Keep learning and continue coding!


Similar Articles