Question

I have a question about the architecture of a backbone.js web app. Let’s say you are creating a movie collection webapp. You would use a Model for a movie and a Collection for your collection of movies.

The view for the collection is basically a load of li’s.

In order to make the webpages indexable by google you would allow it to work without javascript and get rendered on the server side. So that going to mydomain.com/12 would on the server side build up the html li elements for that collection.

If you then wanted to use backbone.js to modify the collection, you would need to load the data into backbone. What is the best way to do this? Two ways I can think of doing this is…

1) use jquery to iterate over the li elements reading the data into backbone – the problem with this is that the html probably only contains the movie names, and not the movie id’s /director information that might be needed in the backbone model. I suppose that data could be included in the html and hidden using css.

2)throw away everything in the list and reload it from the server using ajax – which to me seems like a waste since all the data could have been sent on the first page load.

Are either of these methods good practice? If not, how should it be done?

Answer 1

Jeremy Ashkenas, author of Backbone, recommends that you print the model data as JSON in the page, and load it as an object:

<script>
  Accounts.reset(<%= @accounts.to_json %>);
  Projects.reset(<%= @projects.to_json(:collaborators => true) %>);
</script>

See Backbone FAQ – Loading Bootstrapped Models.