A Backbone.js Playground

A simple playground for learning backbone.js without having to install or configure anything yourself.

by davidsulc

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.modelbinding/master/backbone.modelbinding.min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.memento/master/backbone.memento.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="https://github.com/derickbailey/backbone.marionette/blob/master/lib/backbone.marionette.min.js"></script>

  <h1 class="title">Backbone.js Books</h1>

  <div id="searchBar" class="searchBar">
    <div class="search">
      Search : <input type="text" name="search" autocomplete="off" class="searchValue" value="Neuromarketing" />
      <img src="assets/images/loader.gif" alt="Loading..." class="spinner" />
    </div>
  </div>

  <div id="content"></div>
  <div id="modal"></div>

  <script type="text/template" id="libraryTemplate">
    <div class="library">
      <div style="display:table;width:100%;height:100%;">
        <img src="assets/images/shadow-search.png" style="position:absolute;left: 0px;top: 0px;"/>
        <img src="assets/images/shadow-search-right.png" style="position:absolute;right: 0px;top: 0px;"/>
        <div class="leftBar"></div>
        <div class="books"></div>
        <div class="rightBar"></div>
      </div>
    </div>
  </script>

  <script type="text/template" id="bookTemplate">
    <img src="<%= (thumbnail ? thumbnail : 'http://placehold.it/100x150') %>" alt="" class="book" />
  </script>

  <script type="text/template" id="bookDetailTemplate">
    <a class="close" data-dismiss="modal">x</a>
    <div class="imgBook">
      <img src="<%= (thumbnail ? thumbnail : 'http://placehold.it/200x260') %>" />
    </div>
    <h1><%= title %></h1>
    <%= (subtitle ? '<h2>'+subtitle+'</h2>' : '') %>
    <p><%= (description ? description : 'No description found')...

JavaScript

/*
** http://code.google.com/apis/books/docs/v1/getting_started.html
*/
(function () {
  
MyApp = new Backbone.Marionette.Application();

Book = Backbone.Model.extend();

Books = Backbone.Collection.extend({
  model: Book,
  
  initialize: function(){
    _.bindAll(this, "search");
    MyApp.vent.on("search:term", this.search);
  },
  
  search: function(searchTerm){
    var self = this;
    MyApp.vent.trigger("search:start");
    $.ajax({
      url: 'https://www.googleapis.com/books/v1/volumes',
      dataType: 'jsonp',
      data: 'q='+encodeURIComponent(searchTerm)+'&maxResults=40&fields=totalItems,items(id,volumeInfo/title,volumeInfo/subtitle,volumeInfo/authors,volumeInfo/publishedDate,volumeInfo/description,volumeInfo/imageLinks)',
      success: function (res) {
        MyApp.vent.trigger("search:stop");
        if(res.items && res.items.length > 0){
          var searchResults = [];
          _.each(res.items, function(item){
            var thumbnail = null;
            if(item.volumeInfo && item.volumeInfo.imageLinks && item.volumeInfo.imageLinks.thumbnail){
              thumbnail = item.volumeInfo.imageLinks.thumbnail;
            }
            searchResults[searchResults.length] = new Book({
              thumbnail: thumbnail,
              title: item.volumeInfo.title,
              subtitle: item.volumeInfo.subtitle,
              description: item.volumeInfo.description,
              googleId: item.id
            });
          });
          self.reset(searchResults);
        }
        else if (res.error) {
          MyApp.vent.trigger("search:error");
        }
        else {
          MyApp.vent.trigger("search:noResults");
        }
      }
    });
  }
});

BookDetailView = Backbone.Marionette.ItemView.extend({
  template: "#bookDetailTemplate",
  className: "modal bookDetail"
});

BookView = Backbone.Marionette.ItemView.extend({
  template: "#bookTemplate",
  
  events: {
    'click': 'showBookDetail'
  },
  
  showBookDetail: function(){
   ...