Google Books API with Backbone.js

Demonstration of the use of Backbone.js and Google Books API.

by Atinux

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script type="text/template" id="bookTemplate">
    <% console.log(model.attributes.volumeInfo); %>
        <img src="<%= (model.attributes.volumeInfo.imageLinks ? model.attributes.volumeInfo.imageLinks.smallThumbnail : 'http://placehold.it/64x80/eeeeee/999999') %>" alt="" class="book" />
</script>

CSS

.book {
    border:2px silver solid;
    margin: 5px;
    float: left;
}

JavaScript

/*
** http://code.google.com/apis/books/docs/v1/getting_started.html
*/

var Book = Backbone.Model.extend(),
    Books = Backbone.Collection.extend({
        model: Book
    });
var BookView = Backbone.View.extend({
    tagName: 'div',
    initialize: function () {
        this.el = $(this.el);
        this.render();
    },
    render: function () {
        var template = $('#bookTemplate').html();
        this.el.html(_.template(template, { model: this.model }));
        this.el.appendTo('body');
    }
});

var app = {
    init: function (books) {
        this.books = new Books(books);
        this.books.each(function (book) {
            new BookView({
                model: book
            });
        });
    }
};

$.ajax({
    url: 'https://www.googleapis.com/books/v1/volumes',
    dataType: 'jsonp',
    data: 'q=test',
    success: function (res) {
        app.init(res.items);
    }
});