Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

A new project that I'm working on uses Backbone.js for all of the dynamic parts of the user interface. At first the application was written in a way that required a separate REST call to fetch data to populate a collection and then render it on a page. However, since the documentation for Collection.fetch specifically calls out that this behaviour should be avoided I decided to fix it.
Note that fetch should not be used to populate collections on page load — all models needed at load time should already be bootstrapped in to place. fetch is intended for lazily-loading models for interfaces that are not needed immediately: for example, documents with collections of notes that may be toggled open and closed.


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...
 HTML
<script type="text/template" id="item-template">
<%- id %> - <%- name %>
</script>


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.
 JavaScript
var ItemModel = Backbone.Model.extend({});
var ItemCollection = Backbone.Collection.extend({
model: ItemModel
});
var ItemView = Backbone.View.extend({
tagName: 'div',
template: _.template($('#item-template').html()),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});


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...
 HTML
<script>
bootstrapData = [
{id: 1, name: 'Test 1'},
{id: 2, name: 'Test 2'},
{id: 3, name: 'Test 3'}
];
</script>


How this data gets into the HTML body is up to you. In my case I was looking up my data in the PHP side of the application. Then, I was converting the looked up data into a string representation of a JSON array and assigning it to a Smarty template. The Smarty template then was rendered with all the data ready to be consumed by the JavaScript side of the application.

The main point here is to have the bootstrap data defined as a JavaScript array with hashes of your models contained within it.



Moving onto the code that defines the application view. This is where the 'magic' happens...
 JavaScript
var items = new ItemCollection();
var AppView = Backbone.View.extend({
el: '#content',
initialize: function() {
this.listenTo(items, 'reset', this.addAll);
items.reset(bootstrapData);
},
addAll: function(collection, options) {
this.$el.children().remove();
for (i = 0; i < collection.length; i++) {
var model = collection.at(i);
var itemView = new ItemView({ model: model });
this.$el.append(itemView.render().el);
}
}
});
var app = new AppView();


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...
 HTML
<div id="content"></div>


That's it! Good luck!

-i

Have comments or feedback on what I wrote? Please share them below! Found this useful? Consider sending me a small tip.
comments powered by Disqus
Other posts you may like...
Hi! You can search my blog here ⤵
Or browse the recent top tags...

Recent Blog Posts

How to fix Google Cloud SDK dev server error - No module named ipaddr

Adorable but totally metal - Metal Earth 3D Guardians of the Galaxy Groot model kit

Riverside Expressway Cam shut down permanently

Inserting Google DFP ads with Backbone, Underscore and jQuery

How to resolve the domain is already mapped to a project error in Google App Engine

A quick look at the Nyko Super MiniBoss wireless controllers for the SNES mini

Loading and displaying a collection from bootstrapped data in Backbone.js

Add this handy function to your Bash profile file to display the compiled JDK version for a .class file

How does PCBWay stack up as a low budget PCB fab

Resolving the Cannot reference X before supertype constructor is called compiler error in Java

Recent Galleries

BMB-012 Nanoblock T-Rex Skeleton Model assembly

Tiny Arcade revision 6 kit assembly and decal application

Atari Lynx repair - Part 5 - McWill LED screen mod installation

Atari Lynx repair - Part 4 - screen cover replacement

Atari Lynx repair - Part 2 - re-capping the motherboard

Atari Lynx repair - Part 3 - broken speaker replacement

Atari Lynx repair - Part 1 - introduction and case disassembly

Building a custom Atari Lynx game box storage shelf unit in a day

Protecting old Atari Lynx game boxes with snug fit plastic sleeves

Monument Valley 2 is released and does not disappoint

Blogs and Friends

Matt Moores Blog
Georgi's FlatPress Guide
Perplexing Permutations
The Security Sleuth
Ilia Rogatchevski
Travelling Fairy

Blog Activity

Blog Activity