JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<div id="container"></div>
<script type='text/template' id='template'>
<div>This is a model from url '<%= source %>'</div>
<div><%= data %></div>
</script>
CSS
.title { font-weight: bold; font-size: larger; }
JavaScript
var i=0;
var getMock = function(url, options) {
console.log("Fetching from #" + options.index);
setTimeout(function() {
options.success( [
{ data: "#1", source: options.url },
{ data: "#2", source: options.url },
{ data: "#3", source: options.url }
] );
i++;
}, options.index * 500);
};
var Collection = Backbone.Collection.extend({
fetch: function() {
var self = this;
var url = '';
this.completeCount = 0;
this.temp = [];
this.urls = [ 'url1', 'url2', 'url3', 'url4' ];
_.each(this.urls, function(url, index) {
getMock(url, { url: url, index: index, success: function(data) {
console.log("Got partial collection from " + url);
self.addPartial(data);
} });
});
},
addPartial: function(data) {
this.completeCount ++;
var self = this;
_.each(data, function(item) {
self.temp.push(item);
});
if (this.completeCount == this.urls.length) {
this.reset(this.temp);
}
}
});
var View = Backbone.View.extend({
el: "#container",
template: _.template($("#template").html()),
render: function() {
var self = this;
this.collection.each(function(model) {
self.$el.append(self.template(model.toJSON()));
});
}
});
var coll = new Collection();
var view = new View({ collection: coll });
coll.on("reset", view.render, view);
coll.fetch();