truncs · November 13, 2012 11:18
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html>
 <head>
  <title>I have a back bone</title>
 </head>
 <body>
 <div id="contact-app">

        <div class="title">
            <h1>Contacts App</h1>
        </div>

        <div class="content">

            <div id="new-contact">
                <input name="first_name" placeholder="First Name" type="text" id="first_name"/>
                <input name="last_name" placeholder="Last Name" type="text" id="last_name" />
                <input name="phone" placeholder="Phone Number" type="text" id="phone" />
                <button id="save-button">Create Contact</button>
            </div>

            <div id="contacts">
                <ul id="contact-list">
                </ul>
            </div>

            <div id="contact-stats"></div>

        </div>

    </div>
    <script type="text/template" id="item_template">
    <div class="contact">
        <div class="contact-name"></div>
        <div class="contact-phone"><div>
        <span class="contact-delete"></span>
    </div>
  </script>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
 <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

 <script>

 $(function() {


    //Contact Model
    Contact = Backbone.Model.extend({
        //Contact Defaults
        defaults : {
            first_name : 'First Name',
            last_name : 'Last Name',
            phone : 'Phone Number',
            address: 'sdfsdfs'
        },
        url: '/locations/',
        //Constructor(intialize)
        //Ensuring each contact has a first_name,last_name,phone
        initialize: function(){
            if(!this.get("first_name")) {
                this.set({"first_name":this.defaults.first_name});
            }
            if(!this.get("last_name")) {
                this.set({"last_name":this.defaults.last_name});
            }
            if(!this.get("phone")) {
                this.set({"phone":this.defaults.phone});
            }

            if(!this.get("address")) {
                this.set({"address":this.defaults.phone});
            }
        }
    });

    //Contact Collection

    //The collection is backed by localstorage
    ContactList = Backbone.Collection.extend({
        //Model
        model : Contact,
        //Save all contacts in localstorage under the namespace of "contacts"
        url: '/locations/'
    });

    //Create global collection of Contacts
    Contacts = new ContactList;

    //Contact View
    ContactView = Backbone.View.extend({
        tagName : "li",

        template: _.template($("#item_template").html()),

        events : {
            "click span.contact-delete": "delete_contact"
        },
        initialize: function(){
            this.bind('change',this.render,this);
            this.bind('destroy',this.remove,this);
        },
        render: function() {
          $(this.el).html(this.template(this.model.toJSON()));
          this.setContent();
          this.model.save();
          return this;
        },
        setContent: function() {
            var first_name = this.model.get("first_name");
            var last_name = this.model.get("last_name");
            var phone = this.model.get("phone");
            var name = first_name;
            this.$('.contact-name').html(name);
            this.$('.contact-phone').html(phone);
        },
        remove: function() {
              $(this.el).remove();
        },
        delete_contact: function() {
            this.model.destroy();
        }
    });

    //The Application
    AppView = Backbone.View.extend({

        el: $("#contact-app"),

        events : {
            "click #new-contact #save-button": "createContact"
        },
        initialize: function() {

            Contacts.bind("add", this.addOne, this);
            Contacts.bind("reset", this.addAll, this);          
            Contacts.fetch({add: true});
            alert(Contacts);
            _.each(Contacts, this.addOne(new Contact(_)));
        },

        // Add a single contact item to the list by creating a view for it, and
        // appending its element to the `<ul>`.
        addOne: function(contact) {
          alert('hi');
          var view = new ContactView({model: contact});
          $("#contact-list").append(view.render().el);
        },
        // Add all items in the **Contacts** collection at once.
        addAll: function() {
          Contacts.each(this.addOne);
        },
        // Generate the attributes for a new Contact item.
        newAttributes: function() {
          return {
            first_name : this.$('#first_name').val(),
            last_name : this.$('#last_name').val(),
            phone : this.$('#phone').val()
          };
        },
        createContact: function() {
            Contacts.add(this.newAttributes());
            //Reset Form
            this.$('#first_name').val('');
            this.$('#last_name').val('');
            this.$('#phone').val('');
        }
    });

    // Finally,kick things off by creating the **App**.
     var App = new AppView;
 });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>I have a back bone</title>
	</head>
	<body>
	<div id="contact-app">

	<div class="title">
	<h1>Contacts App</h1>
	</div>

	<div class="content">

	<div id="new-contact">
	<input name="first_name" placeholder="First Name" type="text" id="first_name"/>
	<input name="last_name" placeholder="Last Name" type="text" id="last_name" />
	<input name="phone" placeholder="Phone Number" type="text" id="phone" />
	<button id="save-button">Create Contact</button>
	</div>

	<div id="contacts">
	<ul id="contact-list">
	</ul>
	</div>

	<div id="contact-stats"></div>

	</div>

	</div>
	<script type="text/template" id="item_template">
	<div class="contact">
	<div class="contact-name"></div>
	<div class="contact-phone"><div>
	<span class="contact-delete"></span>
	</div>
	</script>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
	<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

	<script>

	$(function() {


	//Contact Model
	Contact = Backbone.Model.extend({
	//Contact Defaults
	defaults : {
	first_name : 'First Name',
	last_name : 'Last Name',
	phone : 'Phone Number',
	address: 'sdfsdfs'
	},
	url: '/locations/',
	//Constructor(intialize)
	//Ensuring each contact has a first_name,last_name,phone
	initialize: function(){
	if(!this.get("first_name")) {
	this.set({"first_name":this.defaults.first_name});
	}
	if(!this.get("last_name")) {
	this.set({"last_name":this.defaults.last_name});
	}
	if(!this.get("phone")) {
	this.set({"phone":this.defaults.phone});
	}

	if(!this.get("address")) {
	this.set({"address":this.defaults.phone});
	}
	}
	});

	//Contact Collection

	//The collection is backed by localstorage
	ContactList = Backbone.Collection.extend({
	//Model
	model : Contact,
	//Save all contacts in localstorage under the namespace of "contacts"
	url: '/locations/'
	});

	//Create global collection of Contacts
	Contacts = new ContactList;

	//Contact View
	ContactView = Backbone.View.extend({
	tagName : "li",

	template: _.template($("#item_template").html()),

	events : {
	"click span.contact-delete": "delete_contact"
	},
	initialize: function(){
	this.bind('change',this.render,this);
	this.bind('destroy',this.remove,this);
	},
	render: function() {
	$(this.el).html(this.template(this.model.toJSON()));
	this.setContent();
	this.model.save();
	return this;
	},
	setContent: function() {
	var first_name = this.model.get("first_name");
	var last_name = this.model.get("last_name");
	var phone = this.model.get("phone");
	var name = first_name;
	this.$('.contact-name').html(name);
	this.$('.contact-phone').html(phone);
	},
	remove: function() {
	$(this.el).remove();
	},
	delete_contact: function() {
	this.model.destroy();
	}
	});

	//The Application
	AppView = Backbone.View.extend({

	el: $("#contact-app"),

	events : {
	"click #new-contact #save-button": "createContact"
	},
	initialize: function() {

	Contacts.bind("add", this.addOne, this);
	Contacts.bind("reset", this.addAll, this);
	Contacts.fetch({add: true});
	alert(Contacts);
	_.each(Contacts, this.addOne(new Contact(_)));
	},

	// Add a single contact item to the list by creating a view for it, and
	// appending its element to the `<ul>`.
	addOne: function(contact) {
	alert('hi');
	var view = new ContactView({model: contact});
	$("#contact-list").append(view.render().el);
	},
	// Add all items in the Contacts collection at once.
	addAll: function() {
	Contacts.each(this.addOne);
	},
	// Generate the attributes for a new Contact item.
	newAttributes: function() {
	return {
	first_name : this.$('#first_name').val(),
	last_name : this.$('#last_name').val(),
	phone : this.$('#phone').val()
	};
	},
	createContact: function() {
	Contacts.add(this.newAttributes());
	//Reset Form
	this.$('#first_name').val('');
	this.$('#last_name').val('');
	this.$('#phone').val('');
	}
	});

	// Finally,kick things off by creating the App.
	var App = new AppView;
	});
	</script>
	</body>
	</html>