A Backbone.js Playground

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

by Hui Zheng

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://raw.github.com/gist/1506758/091d7f3680489ecb8b511e196edcfc2e52dd05c6/backbone-localstorage.js"></script>
<script src="https://raw.github.com/gist/1506823/db9b7ea3a3a9e76c92d527b18730f604594c4698/bootstrap-modal.js"></script>
<html>
  <head>
   
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
</head>
  
  
<body>
    
    <button data-controls-modal="my-modal" data-backdrop="true" data-keyboard="true" class="btn danger ">Add Contact</button>
    
    
    <div id="my-modal" class="modal" style="display: none;">
        <div class="modal-header">
            <h2>Enter Contact Info</h2>
        </div>
        <div class="modal-body">
            <p>
                First Name:
                   <input id="first-name-input" type="text" /><br/>
                   Last Name:
                   <input id="last-name-input" type="text" /><br/>
                   Address:
                   <input id="address-input" type="text" /><br/>
               </p>
           </div>    
           
           <div class="modal-footer">
               <button id="save-contact" class="btn-primary">Save Contact</button>
           </div>
        
 
    </div>
</body>
  
    
  
  
<!--********* TEMPLATES *************  -->  
  
  
    
    
    
    <script type='text/template' id='contact-row'>
      <td><%= first_name %></td>
      <td><%= last_name %></td>
      <td><%= address %></td>
      <td id="delete-contact"...

CSS

/* ------------------
 styling for the tables 
   ------------------   */


body
{
    
    line-height: 1.6em;
}



table
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 45px;
    width: 900px;
    text-align: left;
    border-collapse: collapse;
}
thead th.rounded-left
{
    background: #b9c9fe url('../table-images/left.png') left -1px no-repeat;
}
thead th.rounded-right
{
    background: #b9c9fe url('../table-images/right.png') right -1px no-repeat;
}
 th
{
    padding: 8px;
    font-weight: normal;
    font-size: 13px;
    color: #039;
    background: #b9c9fe;
}
td
{
    padding: 8px;
    background: #e8edff;
    border-top: 1px solid #fff;
    color: #669;
}
tfoot td.rounded-foot-left
{
    background: #e8edff url('../table-images/botleft.png') left bottom no-repeat;
}
tfoot td.rounded-foot-right
{
    background: #e8edff url('../table-images/botright.png') right bottom no-repeat;
}
tbody tr:hover td
{
    background: #d0dafd;
}




 .contact-destroy {
    position: absolute;
    background:url("../images/delete.png");
    height: 30px;
    width: 30px;
   }

JavaScript

$(function($) {

    Contact = Backbone.Model.extend({
        defaults: {
            first_name: "John",
            last_name: "Smith",
            address: "123 Main St"
        }
    });

    Contacts = Backbone.Collection.extend({
        model: Contact,

       localStorage: new Store("contacts")
    });

    ContactRow = Backbone.View.extend({
        initialize: function() {
            _.bindAll(this, "render");
            this.template = _.template($("#contact-row").html());
        },
       
        tagName: 'tr',

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

    ContactsView = Backbone.View.extend({
        initialize: function() {
            _.bindAll(this, "render", "closeModal", "saveContact");
            $("#my-modal").modal({
                "backdrop": true
            });
            $("button#save-contact").bind("click", this.saveContact);
            this.headerTemplate = $("#contacts-table-header").html();
            this.collection.bind("add", this.renderContact, this);
            this.collection.bind("add", this.closeModal, this);
        },
        
        tagName: 'table',

        render: function() {
            $(this.el).html(this.headerTemplate);

            this.collection.each(function(contact) {
                this.renderContact(contact);
            }, this);

            return this;
        },

        renderContact: function(contact) {
            var contactView = new ContactRow({
                model: contact
            });
            $(this.el).append(contactView.render().el);
        },

        closeModal: function() {
            $("#my-modal").modal("hide");

        },

        saveContact: function() {
            var first = $("#first-name-input").val();
            var last = $("#last-name-input").val();
            var address = $("#address-input").val();
            this.collection.create({
               ...