Re-Learning Backbone.js – View Render

In this post we learn about different ways to render HTML using Backbone.js view and Underscore templates.

A Backbone view should include a render function. The render function should have the responsibility of manipulating the view’s el property. The el property is then used to update the DOM.

This post builds on the following posts:
Re-Learning Backbone.js – View Basics
Re-Learning Backbone.js – Templates (Underscore)
Re-Learning Backbone.js – Models

Here are a couple of quotes about Backbone.js Views:

“Backbone views are almost more convention than they are code — they don’t determine anything about your HTML or CSS for you, and can be used with any JavaScript templating library. The general idea is to organize your interface into logical views, backed by models, each of which can be updated independently when the model changes, without having to redraw the page. Instead of digging into a JSON object, looking up an element in the DOM, and updating the HTML by hand, you can bind your view’s render function to the model’s “change” event — and now everywhere that model data is displayed in the UI, it is always immediately up to date.”

“At a technical level, a Backbone view is simply a JavaScript object that manages a specific DOM element and its descendants.”

In this first example we are going to add some text to a DOM div element.


Close Bitnami banner

In this example we created added a “div” with the id “container-movie”. We will add text to this DOM element.

In the previous post we logged everything to the browser console. Now we are ready to render content in the DOM.

Backbone.js view has a render function, but it doesn’t do anything at all. Here the code from Backbone.js source. This is the only reference in Backbone to the render function

The purpose of this simple render function in Backbone is to provide standardization. So we will override the Backbone view Render function. In our render function we append the string “Title:” and the value in the model to the “el” property of the view. We then use jQuery to find the element in the DOM with the id of “container-movie” and assign the html of “el” to the element.

When we created the movieView1 object we passed in the model, which was assigned to the view model’s property.

When we call render function, the render function is executed.


In this example we are going to use templates

Close Bitnami banner

At the beginning we created a template. Since the type is “text/template” the JavaScript engine will ignore it.

Take notice that when we instantiate the movieView1 we are passing in the “el”. The “el” is set to the container that we want to update.

In the view we automatically create a template property that creates a compile version of the template.

In the render function, we are passing the model data to the template function and return the html result.

We then assign the htmlOutput to the view’s “$el” property, which is pointed to the container that we want to update.


In this example we are going to pass the template when we create movieView1

Close Bitnami banner