Rendering Flickr Cats Via Backbone.js
- by Geertjan
Create a JavaScript file and refer to it inside an HTML file. Then put this into the JavaScript file:
(function($) {
var CatCollection = Backbone.Collection.extend({
url: 'http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
parse: function(response) {
return response.items;
}
});
var CatView = Backbone.View.extend({
el: $('body'),
initialize: function() {
_.bindAll(this, 'render');
carCollectionInstance.fetch({
success: function(response, xhr) {
catView.render();
}
});
},
render: function() {
$(this.el).append("<ul></ul>");
for (var i = 0; i < carCollectionInstance.length; i++) {
$('ul', this.el).append("<li>" + i + carCollectionInstance.models[i].get("description") + "</li>");
}
}
});
var carCollectionInstance = new CatCollection();
var catView = new CatView();
})(jQuery);
Apologies for any errors or misused idioms. It's my second day with Backbone.js, in fact, my second day with JavaScript. I haven't seen anywhere online so far where an example such as the above is found, though plenty that do kind of or pieces of the above, or explain in text, without an actual full example.
The next step, and the only reason for the above experiment, is to create some JPA entities and expose them via RESTful webservices created on EJB methods, for consumption into an HTML5 application via a Backbone.js script very similar to the above.
