Book Image

Mastering Backbone.js

By : Abiee Echamea, Abiee Echamea
Book Image

Mastering Backbone.js

By: Abiee Echamea, Abiee Echamea

Overview of this book

Backbone.js is a popular library to build single page applications used by many start-ups around the world because of its flexibility, robustness and simplicity. It allows you to bring your own tools and libraries to make amazing webapps with your own rules. However, due to its flexibility it is not always easy to create scalable applications with it. By learning the best practices and project organization you will be able to create maintainable and scalable web applications with Backbone.js. With this book you will start right from organizing your Backbone.js application to learn where to put each module and how to wire them. From organizing your code in a logical and physical way, you will go on to delimit view responsibilities and work with complex layouts. Synchronizing models in a two-way binding can be difficult and with sub resources attached it can be even worse. The next chapter will explain strategies for how to deal with these models. The following chapters will help you to manage module dependencies on your projects, explore strategies to upload files to a RESTful API and store information directly in the browser for using it with Backbone.js. After testing your application, you are ready to deploy it to your production environment. The final chapter will cover different flavors of authorization. The Backbone.js library can be difficult to master, but in this book you will get the necessary skill set to create applications with it, and you will be able to use any other library you want in your stack.
Table of Contents (17 chapters)
Mastering Backbone.js
About the Author
About the Reviewers

Binding embedded data

One of the most common issues with Backbone is how to deal with complex model data:

"name": "John Doe",
"address": {
"street": "Seleme",
"number": "1975 int 6",
"city": "Culiacán"
"phones": [{
"label": "Home",
"number": "55 555 123"
  }, {
"label": "Office",
"number": "55 555 234"
"emails": [{
"label": "Work",
"email": "[email protected]"

It could be easy to render a read-only view for this model data; however, the real challenge is how to bind form actions with embedded arrays. In Backbone, it is difficult to use the event system on array objects; if you push a new item in the list, no event will be triggered. This makes it difficult to keep model data in sync with the a view that edits its contents.

Binding an embedded list

Imagine that our Contacts App will now allow us to add more than one phone and email. We will need to change the edit form view to add support for adding, removing, and modifying items on the array of phones and emails: