Full Stack Web Development with Backbone.js

Chapter 3. Building the User Interface

Now that the data layer is in place and we have 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 by a paragraph from Backbone’s documentation:

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 plug-ins that can help you with building advanced collection views (we’ll discuss plug-ins soon). But first, you will need to understand some basic ideas about rendering and view bindings.

Therefore, we will cover the following topics in this chapter:

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

Referencing jQuery

In this chapter, we will combine 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 jQuery with npm in your project as follows: ...