Edit in JSFiddle

$(function() {

    // *** MODELS ***
    window.Item = Backbone.Model.extend({
       defaults: {
           name: "-",
           ordinal : 0
        }
    });

    // *** COLLECTIONS ***
    window.ItemList = Backbone.Collection.extend({
        model: Item
    });
    
    window.Items = new window.ItemList([
      {name: "Item #1", ordinal: 1},
      {name: "Item #2", ordinal: 2},
      {name: "Item #3", ordinal: 3}
    ]);

    // *** VIEWS ***
    window.ItemEntryView = Backbone.View.extend({
        el: $('.itemEntry'),        
        events: {
            "click .add": "addItem"
        },
        addItem: function() {
            var itemName = this.$("#itemName").val();
            var view = new ItemsView();
            var item= new Item({name:itemName});
            view.add(item);
        }
    });   
        
window.ItemView = Backbone.View.extend({
        className: 'item',
        tagName: "li",
        events: {
            "click": "toggle"
        },
        initialize: function () {
            _.bindAll(this);
            this.model.bind('change', this.render, this);
        },
        render: function () {
            $(this.el).html(this.model.get('name'));
            if (this.model.get('selected')) {
                $(this.el).addClass('selected');
            } else {
                $(this.el).removeClass('selected');
            }
            return this;
        },
        toggle: function () {
            if (this.model.get('selected')) {
                this.model.set({ selected: false });
            }
            else {
                this.model.set({ selected: true });
            }
        }
    });
    
    window.ItemsView = Backbone.View.extend({
        collection: window.Items,        
        el: $('.items'),        
        initialize: function(){
            _.bindAll(this);
            this.collection.bind('reset', this.render);
            this.collection.bind('add', this.add);
        },
        add: function(item) {
            var vItem = new window.ItemView({ model: item });
            this.el.append(vItem.render().el);
        },
        render: function() {
            var self = this;
            this.collection.each(function(item){               
               self.add(item);               
            });
          return this;
        }
    });               
    
    // View to initialize app.
    window.AppView = Backbone.View.extend({
        render: function () {
            new window.ItemEntryView();
            new window.ItemsView().render();
        }
    });
    
    new window.AppView().render();  

});
<div class="content">
    <div class="itemEntry">    
        <input id="itemName" type="text" style="width:200px"/>   
        <input type="button" value="Add" class="add" />        
    </div>
    <div class="items">
        <ul class="list"></ul>
    </div>
</div>
.selected {background:#e0e0e0;}
.item {border:solid 1px #000;margin:2px;cursor:pointer;}
.items {border:solid 1px #000;width:200px;}

External resources loaded into this fiddle: