Mastering Backbone.js

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": "[e-mail]"
  }]
}

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 ...