There is a section on loading bootstrapped models but to me it was as clear as mud. After a bit of trial and error I worked out how to load bootstrapped data and created this JSFiddle to show it.
I'm omitting all of the RESTful parts of the code for this example.
Lets get started with the template definition. This is inside the main page HTML...
Nothing fancy there, the template displays the 'id' and 'name' attributes from the model. Next is the basic definition of the model, collection and model view.
Again, nothing fancy here, just some stock standard Backbone.js code. The collection is defined for the model and the view is defined for the same model. The view uses the previously defined template to create an element and populate it from its model.
Next is the bootstrap data. This is defined in the HTML body...
Moving onto the code that defines the application view. This is where the 'magic' happens...
In the initialize() function I add a listener for the 'reset' event that calls the addAll() function. Immediately after I call reset() on the collection passing in the bootstrap data that was defined earlier.
In the addAll() function I first remove all of the previous contents of the app view containing element. This is important in case the collection reset is triggered multiple times since we don't want to show duplicate data. Afterwards I loop over the collection getting each model, creating its corresponding view and then appending it to the app view containing element.
That last part where I loop over the collection and create new model views was something that wasn't clear to me after reading Backbone.js documentation. The final code is really straight forward but it did take me a bit of experimentation to get there (I'm not a frond end developer after all!)
Don't forget to add a div to the page HTML to contain the app elements...
That's it! Good luck!