Simple Todo CRUD (without U)

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.marionette/master/lib/backbone.marionette.min.js"></script>
<script src="http://raw.github.com/jeromegn/Backbone.localStorage/master/backbone.localStorage-min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<script id="todo-form-template" type="text/template">
    <h1>Todos</h1>
    <form>
        <fieldset>
            <div class="control-group">
                <label class="control-label" for="new-todo">New todo</label>
                <div class="controls">
                    <input id="new-todo" class="input-large" type="text">
                    <p class="help-block">Type todo and hit enter to add</p>
                </div>
            </div>
        </fieldset>              
    </form>
</script>

<script id="todos-view-template" type="text/template">
    <table class="table"><tbody id="todo-list"></tbody></table>
    <button id="all">All</button>
    <button id="active">Active</button>
    <button id="completed">Completed</button>
</script>

<script id="todo-item-template" type="text/template">
    <td>
        <input class="toggle" type="checkbox" <%= completed ? 'checked="checked"' : '' %> /></td>
    <td><label><%= title %></label></td>
        <td><button class="destroy">Remove</button></td>
</script>

<div id="todo-form"></div>
<div id="todos-view"></div>

CSS

.completed label {
    color: #a9a9a9;
    text-decoration: line-through;
}

JavaScript

var Marionette = Backbone.Marionette;

// Todo entity model
TodoModel = Backbone.Model.extend({
    
    // Default attributes for the todo.
    defaults: {
        title: "empty todo...",
        completed: false
    },
    
    // Toggle the `completed` state of this todo item.
    toggleCompleted: function() {
        this.save({completed: !this.get("completed")});
    }    
            
});

TodoCollection = Backbone.Collection.extend({
    // Save all of the todo items under the 'todos-marionette' namespace.
    localStorage: new Backbone.LocalStorage("jsfiddle-todos"),    
    model: TodoModel
});

TodoItemView = Marionette.ItemView.extend({
    template: "#todo-item-template",
    tagName: "tr",
    
    // The DOM events specific to an item.
    events: {
        "click .toggle"   : "toggleCompleted",
        "click .destroy"  : "clear"
    },
    
    // Toggle the `"completed"` state of the model.
    toggleCompleted: function() {
        this.model.toggleCompleted();
    },
    
    // Remove the item, destroy the model.
    clear: function() {
        this.model.destroy();
    },
    onRender: function() {
        var $el = $(this.el);
        $el.toggleClass('completed', this.model.get('completed'));
    },    
});

function FilteredCollection(collection){
    var filtered = new collection.constructor();
        
    filtered.filter = function(criteria){
        var items;
        if (criteria){
            items = collection.where(criteria);
        } else {
            items = collection.models;
        }
        filtered.reset(items);
    };
    collection.on("change", function(model){
        filtered.reset(collection.models);
    });
    collection.on("reset", function(){
        filtered.reset(collection.models);
    });            
        
    return filtered;
}    

TodoForm = Marionette.ItemView.extend({
    template: "#todo-form-template",
    events: {
        "keypress #new-todo":  "createOnEnter"
    },
    
    ui: {
        input:...