Full Stack JavaScript by Azat Mardan

Author:Azat Mardan
Language: eng
Format: epub, pdf
Publisher: Apress, Berkeley, CA

Backbone.js Event Binding

Supplemental video which walks you through the implementation and demonstrates the project: http://bit.ly/1k0ZnUB .

In real life, getting data does not happen instantaneously, so let’s refactor our code to simulate it. For a better user experience (UX), we’ll also have to show a loading icon (a spinner or ajax-loader) to users to notify them that the information is being loaded.

It’s a good thing that we have event binding in Backbone. Without it, we would have to pass a function that renders HTML as a callback to the data loading function, to make sure that the rendering function is not executed before we have the actual data to display.

Therefore, when a user goes to detailed view (apples/:id) we only call the function that loads the data. Then, with the proper event listeners, our view will automagically (this is not a typo) update itself when there is new data (or on a data change; Backbone.js supports multiple and even custom events).

For your information, if you don’t feel like typing out the code (which I recommend), it’s in 05-backbone/binding and GitHub ( https://github.com/azat-co/fullstack-javascript/blob/master/05-backbone/binding/index.html ).

Let’s change the code in the router:

...

loadApple: function(appleName){

this.appleView.loadApple(appleName)

}

...

Everything else remains the same until we get to the appleView class. We’ll need to add a constructor or an initialize method, which is a special word or property in the Backbone.js framework. It’s called each time we create an instance of an object, such as var someObj = new SomeObject(). We can also pass extra parameters to the initialize function, as we did with our views (we passed an object with the key collection and the value of apples Backbone Collection). Read more on Backbone.js constructors at backbonejs.org/#View-constructor .

...

var appleView = Backbone.View.extend({

initialize: function(){

// TODO: create and setup model (aka an apple)

},

...

We have our initialize function; now we need to create a model that will represent a single apple and set up proper event listeners on the model. We’ll use two types of events, change and a custom event called spinner. To do that, we are going to use the on() function, which takes these properties: on(event, actions, context). You can read more about it at backbonejs.org/#Events-on .

...

var appleView = Backbone.View.extend({

initialize: function(){

this.model = new (Backbone.Model.extend({}))

this.model.bind(’change’, this.render, this)

this.bind(’spinner’, this.showSpinner, this)

},

...

})

...

The preceding code basically boils down to two simple things: 1.Call the render() function of the appleView object when the model has changed.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.