Rendering Flickr Cats Via Backbone.js

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. 

Comments:

Awesome!

Posted by guest on October 27, 2013 at 03:08 PM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
12
13
14
24
25
26
27
28
29
30
   
       
Today