A Backbone.js Playground

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

by edwardmsmith

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>
<div class="lists"></div>

JavaScript

window.NewListView = Backbone.View.extend({
  template: _.template('<a href="/list" class="button new-list">Create New List</a>'),

  render: function(){
    $(this.el).html(this.template());
    return this;
  }
});

window.List = new (Backbone.Router.extend({
  routes: { "": "index" },

  initialize: function(){
    this.newListView = new NewListView();
    console.log("List Initialize");
    $('.lists').append(this.newListView.render().el);
  },

  start: function(){
    Backbone.history.start();
  },

  index: function(){

  }
}));

$(function(){ 
    console.log("Before List Start");
    List.start(); 
    console.log("After List Start");

})