Backbone sample environment

by sumit_skr

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>
<div id="container">
    <div class='new'>
      <label>
          Name:
          <input id="txtName" type="text" title="Type your name please" />
      </label>
      <button id="btnSubmit" type="button" value="Submit">Submit</button>
    </div>
    <ul id='listName'></ul>
</div>
<script id="person_template" type="text/template">    
    Hello, my name is <%= name %>
</script>

JavaScript

var Person = Backbone.Model.extend({
    defaults: { name: "Type your name" }
});

var People = Backbone.Collection.extend({
    model: Person
});

var PersonView = Backbone.View.extend({
    tagName: 'li',
    className: 'items',
    template: _.template($("#person_template").html()),
    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});

var PeopleView = Backbone.View.extend({
    el: '#container',
    className: 'list',
    initialize: function() {
    	this.collection = new People();
    },
    events: {
        "click #btnSubmit": "submit"
    },
    submit: function () {
        var person = new Person({
        	name: $("#txtName").val()
        });
        this.collection.add(person);
        this.render();
        $("#txtName").val('');
    },
    render: function() {
    console.log($(this.el).find('.items'));
       $(this.el).find('.items').remove();
       _.each(this.collection.models, function(item){
          var personView = new PersonView({model: item});
          personView.render();
          $('#listName').append(personView.el);
       })
       return this;
    }
});

var people = new People();

var peopleView = new PeopleView();

//$("#container").append(peopleView.render().el);