Over a million developers have joined DZone.

BackBone Tutorial – Part 6: Understanding Backbone.js Views

· Java Zone

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

In this article, we will try to look at the View classes in Backbone.js and see how view classes help us in updating the relevant parts of the application easily.

Background

The biggest problem while writing JavaScript applications is the spaghetti code that one needs to write just for HTML DOM manipulation. Every element on the UI will need some actions to happen when the user interacts with them. Some UI elements would want to automatically update the values based on the new/updated data. Doing all this using plain HTML and JavaScript/jQuery is a big problem (doable but nightmare) specially from maintenance perspective.

Backbone.js view greatly helps us when it comes to creating large scale manageable applications. The view classes are more like a glue that holds an HTML template with the model object. Also, this provides the mechanism to handle the events raised from the model and update the UI and handle UI events and act on them (perform some operations on the model). So in a way we can say that the views are just observers who are listening to the model and UI events which makes them a perfect place to handle all the events and act upon them. Backbone views can be thought of as:

  1. Observers that keep listening to the DOM events and in case the event fires taking the appropriate actions.
  2. Objects backed by models that are responsible for rendering the model data on the screen.

Let us see how we can use backbone.js views to efficiently manage the applications.

Link to complete series:

Link to complete series:

  1. BackBone Tutorial – Part 1: Introduction to Backbone.Js[^]
  2. BackBone Tutorial – Part 2: Understanding the basics of Backbone Models[^]
  3. BackBone Tutorial – Part 3: More about Backbone Models[^]
  4. BackBone Tutorial – Part 4: CRUD Operations on BackboneJs Models using HTTP REST Service[^]
  5. BackBone Tutorial – Part 5: Understanding Backbone.js Collections[^]
  6. BackBone Tutorial – Part 6: Understanding Backbone.js Views[^]
  7. BackBone Tutorial – Part 7: Understanding Backbone.js Routes and History[^]

Using the code

Creating a simple view

Let is start the discussion by looking at how we can create backbone views. Like backbone models and collections, creating a backbone view is also as easy as extending the existing View class of backbone.

varsampleView=Backbone.View.extend({
});

Like models and collections, we can also override the initialize and constructor of the backbone views. Lets try to see how we can override the initialize function.

varsampleView=Backbone.View.extend({
initialize:function(){
console.log('sampleView has been created');
}
});

Instantiating the view is also straight forward. A view can simply be instantiated using the new keyword.

varview1=newsampleView();

Associating model with a view

Every view will be backed by a model. This model can be passed to the view in the constructor.

varbook1=newBook({ID:1,BookName:"Book 1"});
varm_bookView=newbookView({model:book1});

This model can either be a backbone model or a backbone collection. The view can extract the information from its model and render the HTML accordingly.

Understanding the el property

Now we are saying that the views are responsible for listening to DOM element’s events and also for updating the DOM elements. For this to happen the view class should be associated/attached to a DOM element. Backbone views are always associated to a DOM element. This associated DOM element can be accessed/manipulated using the el property.

Now there are 2 ways to create view:

  1. Creating a view that will get associated with an existing DOM element.
  2. Creating a view that will create its own DOM element on the fly.

So lets start by looking at how we can create a view that will get associated with an existing DOM element. The views constructor is capable of accepting a lot of parameters. It can accept models, collections and even the DOM element that this view should associate itself to.

Lets say we want to create a view for an existing DOM element i.e. a div with id="sampleDiv".

varview1=newsampleView({el:$("#sampleDiv")});

When we run the application and try to watch the el property, we can see that the el property contains the div element.

elExistingDom

Now lets see how we can create a view that will create a DOM element for it dynamically. The way it works is that we can specify tagName, className, id and attributes in a backbone view. Based on these values the el will be created by backbone. Lets try to create a simple div with id using this approach.

varsampleView2=Backbone.View.extend({
tagname:'div',
id:'sampleDiv'
});

When we create this view, we can see that the view is associated with a div which was created using our specified tagName and id values.

varview2=newsampleView2();

elDynamicDom

Now these two approached provides a lot of flexibility while developing backbone applications. Let us try to look at a simple example to understand the complete picture. lets say we need to create a list of books. We know the area where these items should be rendered but we the actual items will be added at runtime. This can easily be achieved by creating an empty list and using JavaScript to add list items at runtime. Lets see how we can use backbone views to achieve this.

First let us create the a simple view that will render the book data as a list element. Do do this we will use the dynamically generated DOM element.

varbookView=Backbone.View.extend({
tagname:"li",
model:Book,
render:function(){
this.$el.html('<li>'+this.model.get("BookName")+'</li>');
returnthis;
}
});

What this view is doing is that, it is overiding the render function to render the book name in a list element. We have overridden the render function to render the book as a list element.

Now we need a view that will contain this list elements i.e. the list view. For this lets create a simple list element on my HTML and then lets use this view class to use that el.

varbookListView=Backbone.View.extend({
model:BooksCollection,
render:function(){
this.$el.html();// lets render this view
varself=this;
for(vari=0;i<this.model.length;++i){
// lets create a book view to render
varm_bookView=newbookView({model:this.model.at(i)});
// lets add this book view to this list view
this.$el.append(m_bookView.$el);
m_bookView.render();// lets render the book 
}
  returnthis;
},
});

What this view is doing is that, it is accepting a collection of books and in the render function it is using the bookView to render the books inside the associated el. Now the next thing we need to do is to associated the list created on the HTML page with this view as its el and pass the books collection to this view as model.

varbook1=newBook({ID:1,BookName:"Book 1"});
varbook2=newBook({ID:2,BookName:"Book 2"});
varbook3=newBook({ID:3,BookName:"Book 3"});
varbook4=newBook({ID:4,BookName:"Book 4"});
varbook5=newBook({ID:5,BookName:"Book 5"});
varbookCollection=newBooksCollection([book1,book2,book3,book4,book5]);
varbookList=null;
$(document).ready(function(){
bookList=newbookListView({el:$("#bookList"),model:bookCollection});
bookList.render();
});

Calling the render function of this view will use our backbone views and render the list of books in an unordered list.

runningSample

Note: A view’s el can be changed anytime by calling the setElement method of the view.

Using templates

Now in our example we have overridden the render function of our views and took charge of rendering the HTML is our own code. This is still better than plain JavaScript/jquery based approach because here our JavaScript code is not intermingled with HTML and there is a logical structure to our views.

But the problem is that our view HTML could become very complex and it might always not be possible to spit out that HTML from our render functions. To ease this problem backbone supports view templates. Any template engine can be used with backbone view. To understand the concept of templates, let us use the simple JavaScript style templates.

Lets say that every book needs to be rendered as a drop down menu. This can be achived by using bootstrap very easily. But creating all that HTML in the render function might not be a very good idea. So let us create one more set of views that will use the template to render the books in a drop-down.

varbookView2=Backbone.View.extend({
 
model:Book,
tagName:'li',
template:'',
initialize:function(){
this.template=_.template($('#bookItem').html());
},
render:function(){
this.$el.html(this.template(this.model.attributes));
returnthis;
}
});
varbookListView2=Backbone.View.extend({
model:BooksCollection,
render:function(){
this.$el.html();// lets render this view
for(vari=0;i<this.model.length;++i){
// lets create a book view to render
varm_bookView=newbookView2({model:this.model.at(i)});
// lets add this book view to this list view
this.$el.append(m_bookView.$el);
m_bookView.render();// lets render the book 
}
  returnthis;
},
});

And the template is defined in the HTML file itself as:

<script type="text/template"id="bookItem">
  <li role="presentation"><arole="menuitem"tabindex="-1"href="#"><%=BookName%></a></li>
 </script>

templateViewRendering

What will happen here is that the bookView2 will use this template to render the books as list elements. Backbone can work on any view engine. Also the example taken here was little contrived but very complex templates can also be created and rendered using this approach very easily.

Listening to DOM events

Now there is one important thing remaining. how can a view object listen to DOM elements and perform needed actions. To understand this let us add a simple button on our list view and try to listen to its click action.

varbookView2=Backbone.View.extend({
 
model:Book,
tagName:'li',
template:'',
events:{
'click':"itemClicked"
},
itemClicked:function(){
alert('clicked: '+this.model.get('BookName'));
},
initialize:function(){
this.template=_.template($('#bookItem').html());
},
render:function(){
this.$el.html(this.template(this.model.attributes));
returnthis;
}
});

Now whenever an a DOM element raises an event the associated view will look for its handler in the events section. If the handler exists, it calls that handler. this is very useful when we need to listen to DOM events and take some actions. we can use {"event selector": "callback"} format to declare our DOM event handlers. the selector are are usual jquery/css selectors.

Listening to Model changes

In large scale applications there might be multiple views rendering the same data. what if one view changes the data? should other views continue to show the stale data? Probably no. Thus we also need to listen to the model changes too. this can easily be achieved by listening to model changes as:

varbookListView=Backbone.View.extend({
model:BooksCollection,
initialize:function(){
// lets listen to model change and update ourselves
this.listenTo(this.model,"add",this.modelUpdated);
},
modelUpdated:function(){
this.render();
},
});

What we did here is that whenever new books are added to the collection. The associated view will be listening to the add event. On recieving this event it will simply renders the view again. This can be tested by simply adding few more books in the already rendering collection

functionAddMoreBooks(){
vari=bookCollection.length+1;
varnewBook=newBook({ID:i,BookName:'yet another book_'+i});
bookCollection.add(newBook);
}

listenToAdd

On same lines, we can also listen to change event to listen to model updates.

varbookView=Backbone.View.extend({
tagName:"li",
model:Book,
initialize:function(){
// lets listen to model change and update ourselves
this.listenTo(this.model,"change",this.render);
}
});

To test this, lets just try to update a book that is already being rendered on screen.

book1.set('BookName',book1.get('BookName')+'_updated');

listenChange

Removing a view from DOM

Removing a view from DOM can be easily achieved by calling the remove function on the view.

bookList.remove();

Point of interest

In this article we looked at the backbone views. We looked at how we can use backbone views to implement better structured applications that can easily perform DOM manipulations.

Download sample code for this article: backboneViewsSample


Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.

Topics:

Published at DZone with permission of Rahul Rajat Singh, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}