truncs/gist:4070555

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
  <title>I have a back bone</title>
</head>
<body>
<form>
  Name: <input type="text" name="name" id="name"/>
  Age: <input type="text" name="address" id="address"/>
  <input type="submit" value="Submit"></input>
</form>

<ul id="friends-list">
</ul>
<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 ($) {

  Location = Backbone.Model.extend({
    //Create a model to hold friend atribute
    url: '/locations/',
    defaults : {
      name: null,
      address: null,
      lat: null,
      lng: null,
      id: null
    },
  });

  Locations = Backbone.Collection.extend({

    url: '/locations/',
    initialize: function (models, options) {
      this.bind("add", options.view.addFriendLi);
    },

    parse: function(resp) {
      return resp;
    }
  });


  AppView = Backbone.View.extend({
    el: $("body"),
    initialize: function () {
      this.locations = new Locations( null, { view: this });
        _.bindAll(this, "render");


      this.locations.bind("reset", this.render);
      this.locations.add($.parseJSON({{locations|tojson|safe}}));

    },

    render: function() {
      alert(this.locations.length);
    },
      events: {'submit': 'save',
               'reset': 'addAll'},

      addAll: function() {
        this.locations.each(this.addFriendLi);
      },

      save: function() {
        alert(JSON.stringify(this.locations));
        var location_name = $('#name').val();
        var location_address = $('#address').val();
        var location = new Location({name: location_name, address: location_address});
        location.save();
        this.locations.add(location);
        $('#name').val("");
        $('#address').val("");
        return false;
      },

    addFriendLi: function (model) {
      $("#friends-list").append("<li>" + model.get('name') + " " + model.get('address') + "</li>");
    }
  });

  var appview = new AppView;

})(jQuery);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>I have a back bone</title>
	</head>
	<body>
	<form>
	Name: <input type="text" name="name" id="name"/>
	Age: <input type="text" name="address" id="address"/>
	<input type="submit" value="Submit"></input>
	</form>

	<ul id="friends-list">
	</ul>
	<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 ($) {

	Location = Backbone.Model.extend({
	//Create a model to hold friend atribute
	url: '/locations/',
	defaults : {
	name: null,
	address: null,
	lat: null,
	lng: null,
	id: null
	},
	});

	Locations = Backbone.Collection.extend({

	url: '/locations/',
	initialize: function (models, options) {
	this.bind("add", options.view.addFriendLi);
	},

	parse: function(resp) {
	return resp;
	}
	});



	AppView = Backbone.View.extend({
	el: $("body"),
	initialize: function () {
	this.locations = new Locations( null, { view: this });
	_.bindAll(this, "render");


	this.locations.bind("reset", this.render);
	this.locations.add($.parseJSON({{locations\|tojson\|safe}}));

	},

	render: function() {
	alert(this.locations.length);
	},
	events: {'submit': 'save',
	'reset': 'addAll'},

	addAll: function() {
	this.locations.each(this.addFriendLi);
	},

	save: function() {
	alert(JSON.stringify(this.locations));
	var location_name = $('#name').val();
	var location_address = $('#address').val();
	var location = new Location({name: location_name, address: location_address});
	location.save();
	this.locations.add(location);
	$('#name').val("");
	$('#address').val("");
	return false;
	},

	addFriendLi: function (model) {
	$("#friends-list").append("<li>" + model.get('name') + " " + model.get('address') + "</li>");
	}
	});

	var appview = new AppView;

	})(jQuery);
	</script>
	</body>
	</html>