Adding States to your Backbone Views

Looking and testing React JS, I was intrigued by the omnipresent state object in React components. I love the idea of listening this object and re-rendering the component whenever it changes (React being very efficient at this).

I’ve always tried to do this when developing Backbone JS applications. I believe that even if a Backbone view is rendered X times, it would always render the same content. However most of the time the Backbone view is re-rendered when the model attributes change. In React the state object can be mixed with state values and data that will be rendered in the HTML.

It is easy to introduce a state variable by initializing a Backbone model state and render the view when this model changes. Now you can store different view states like loading, valid, etc… and pass it to the template. This is very effective to store states generated by user actions.

Here is an example below illustrating a state in a backbone view.