Backbone js Todo list

index.html

<div id="new-todo">
<input type="text"><button>Add</button>
</div>
<ul class="todos-list">
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script type="text/javascript" src="index.js"></script>

index.js

$(document).ready(function() {

    var ToDoView = Backbone.View.extend({
        el : $('#new-todo'),
        events : {
            'click button' : 'onAddClicked'
        },
        
        onAddClicked : function() {
            var model = { name : this.$el.find('input').val()};
            todos.add(model);
        }
    })

    new ToDoView();

    /**
     * A backbone view that renders a list item view for each element in the collection.
     */
    var ToDosListView = Backbone.View.extend({
        el : $("ul.todos-list"),

        constructor : function() {
            this.listenTo(todos, 'add', this.addOne);
            this.listenTo(todos, 'remove', this.resetAll);
        },

        addOne : function(todoModel) {
            var element = $(this.el)
            var listItemView = new ToDoListItemView({model : todoModel}).render()
            element.append(listItemView);
        },

        resetAll : function() {
            var element = $(this.el);
            element.empty();
            this.render();
        },

        render : function() {
            var element = $(this.el);
            todos.forEach(function(todoModel) {
                var listItemView = new ToDoListItemView({model : todoModel}).render()
                element.append(listItemView);
            })
        }
    })

    var todos = new Backbone.Collection([{name : "Apple"}, {name : "Ball"}, {name : "Cat"}]);

    var ToDoListItemView = Backbone.View.extend({
        
        tagName : 'li',

        events : {
            'click button' : 'onDeleteClicked'
        },

        render : function() {
            $(this.el).html('<span>'+this.model.get('name')+'</span><button>Delete</button>');  
            return $(this.el);
        },

        onDeleteClicked : function() {
            todos.remove(this.model);
        }

    })
    var todoListView = new ToDosListView();
    todoListView.render();


})