Backbone.js Basics: Bringing an App to Life with Events

In a previous tutorial, we plunged into the workings of Backbone.js, an MV* JavaScript framework for building applications. Building a small surf shop app (to help us keep track of surf boards in stock), we looked at creating models, grouping model instances into collections, and iterating over collections to create views. We also took it a step further by rendering each of our model instances into its own view, and grouping them together in a parent view. This is where we left off.

In this tutorial, we’re going to see the importance of that last step, and introduce some controller-type logic into the picture. I touched on controller-type logic and where it belongs in the last article, but let’s just drive the point home before we continue.

Separation of Concerns

In an MV* framework, views are typically responsible for the following:

1. Rendering the UI, and displaying the data retrieved from the database and/or collections to the end user.
2. Handling user input via events, and somehow communicating those events to the model.

The “somehow” part is where the controller logic comes in. In Backbone.js, we’re able to bind events to a view during its instantiation. If we wanted to add or remove stock, or delete a model completely, we’re able to do so. We’ll go through how to do this step by step, but for now, just imagine that we have a button in our view that allowed us to remove one item from stock. We can register that event in the view, which is essentially controller logic. When that button is clicked, we communicate with the respective model, and make the necessary updates to it. Changes in models can also trigger events that the view can handle, ultimately re-rendering the view and displaying the correct data.

So in a nutshell:

1. A view renders model data, and registers events.
2. When an event is fired via user input, we can run some kind of callback or function which communicates with the model.
3. Inside the model, the logic gets performed. In a real world scenario, you’ll probably also be updating a database here.
4. The model change fires off an event.
5. The view picks up on that event, and acts accordingly, possibly re-rendering itself.

With all that in mind, we now need to think about how we’re going to register these events in the first place. Let’s move on to that.

Using Backbone Events

According to the Backbone events documentation:

Events is a module that can be mixed in to any object, giving the object the ability to bind and trigger custom named events.

There are many ways to handle events in a Backbone application, but we’ll be leveraging two ways:

1. We’ll use the catalog of built in events in tandem with the listenTo method, which tells an object to listen to a particular event on another object.
2. We’ll also delegate events using the events hash directly inside the view.

Let’s first take a look at leveraging the events hash inside the view instances.

Leveraging the Events Hash

Here’s a recap of the current code of the SurfboardView from last time:

[code language="js"]
var SurfboardView = Backbone.View.extend({

tagName: 'tr',

template: _.template($('#surfboard-template').html()),

render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
}

});
[/code]

You’ll notice that each view instance gets wrapped in its own tr element, which is populated from the template we made before. Let’s edit that template a little bit to include a couple of buttons that will allow us to add and remove stock. We’ll also need to update the markup for the table:

[code language="html"]

Manufacturer	Model	Stock	Add/Remove

[/code]

Each of our view instances should now have two buttons, but they do nothing at the moment. Let’s take a look at the events hash now, and see how we can register clicks on those two buttons. An events hash in Backbone generally looks like this:

[code language="js"]
events: {
'event target': 'callback'
}
[/code]

Continue reading %Backbone.js Basics: Bringing an App to Life with Events%

by Nick Salloum via SitePoint

< %= manufacturer %>

< %= model %>

< %= stock %>