app.js

var Todo = Backbone.Model.extend({
});

//a collection of todo model objects
var TodoList = Backbone.Collection.extend({
  model: Todo
});


var TodoView = Backbone.View.extend({
  el: '#todo-container',
  events: {
    'keyup .new-todo-box': 'handleEnter'
  },
  handleEnter: function(e){
    if(e.keyCode == 13){
      this.createNewTodo();
    }
  },

  initialize: function(){
    this.collection = new TodoList();
    this.listenTo(this.collection, "add", this.refreshList, this);
  },
  
  refreshList: function(){
    var source   = $("#list-item").html();
    var template = Handlebars.compile(source);
    $('.todo-list').html(template(this.collection.toJSON()))
  },
  
  createNewTodo: function(){
    var newTodo = new Todo();
    var message = $('.new-todo-box').val()
    newTodo.set({'message': message })
    this.collection.add(newTodo)
    $('.new-todo-box').val("")
  }
});
  
$(document).ready(function(){  
  new TodoView();
});