X

Geertjan's Blog

  • December 9, 2012

Rendering Flickr Cats Via Backbone.js

Geertjan Wielenga
Product Manager
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. 

Join the discussion

Comments ( 1 )
  • guest Sunday, October 27, 2013

    Awesome!


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.