O'Reilly logo

Full Stack Web Development with Backbone.js by Patrick Mulder

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 3. Building the User Interface

With the data layer in place, and a basic understanding of events, let’s look at Backbone views to build DOM nodes and capture events from users.

The goal of this chapter is summarized pretty good by a paragraph from Backbone’s documentation at http://backbonejs.org#View :

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.

A difficult subject is the point of “organizing” views. For example, for the interface of Munich Cinema, we will need a kind of “collection view” that renders a Backbone collection instead of a simple model.

In the ecosystem of Backbone.js, there are several plugins that can help you with building advanced collection views. And, we will come to the use of plugins soon. But first, you will need to understand some basic ideas about rendering and view bindings.

Therefore, we will discuss in this chapter:

  • The basic API of Backbone.View on building DOM nodes
  • A basic idea on view templates
  • Some ideas about capturing events from a view
  • Binding a collection view to the movies collection

Referencing jQuery

In this chapter, you are combining DOM manipulation with jQuery and Backbone for the first time. There are other libraries to manipulate the DOM, such as Zepto.js. Avoiding jQuery can be interesting if you develop a mobile app.

For the use case of Munich Cinema, jQuery will work fine. You can import ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required