The problem: Your application needs models to be available on page load.
Solution: Bootstrap collections and models by creating collections in an
inline <script> block.
This is mentioned in the official Backbone documentation under the Loading bootstrapped models section.
Define your collection data in an inline script in the HTML file.
If you have collections for Photos, you may be doing it this way:
<body>
...
<script>
App.photos = new Photos([
{ id: 2, name: "My dog", filename: "IMG_0392.jpg" },
{ id: 3, name: "Our house", filename: "IMG_0393.jpg" },
{ id: 4, name: "My favorite food", filename: "IMG_0394.jpg" },
{ id: 5, name: "His bag", filename: "IMG_0394.jpg" },
...
]);
</script>
</body>
To get a single Photo, instead of creating a Photo instance and using
fetch(), simply pluck it from the giant collection.
// Gets by ID
var photo = App.photos.get(2);
// Gets a bunch of photos based on criteria
var photo = App.photos.select(function(photo) {
return photo.get('filename').match(/^IMG/);
});
In your server-side templates, you will probably be using to_json on a
collection of your server-side models.
<script>
App.photos = new Photos(<%= @photos.to_json %>);
</script>
On Rails, you may need to use the .html_safe method.
<script>
App.photos = new Photos(<%= @photos.to_json.html_safe %>);
</script>
If you use HAML, you will need use a syntax similar to this.
:javascript
App.photos = new Photos(#{@photos.to_json});
In your server-side templates, you will probably be using json_encode() on a collection of your server-side models.
<script>
App.photos = new Photos(<?php echo json_encode($photos); ?>);
</script>
In your Razor view, you may parse your server side models into JSON using Json.Encode().
<script>
App.photos = new Photos(@Html.Raw(Json.Encode(photos)))
</script>