Backbone.js::Experimenting with views, models

First todo app draft. Trying to understand some concepts

by mreis1

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<!-- TODO APP 
    -> Mark item by readed
    -> Filter item by status
-->

<div class="todo-app">

</div>

<script id="tmpl-todo-app" type="template">
     <div class="todo-tools">
         <form class="todo-form">
             <input class="todo-desc" type="text" name="desc" />
             <input type="submit" value="adicionar" />
             <label for="isdone">is done?</label>
             <input id="isdone" type="checkbox" name="isdone"/>
             <a href="#" class="remove-last">remove last</a>
         </form>
    </div>
    <ul class="todo-list">
        
    </ul>  
</script>
<script id="tmpl-todo-item" type="template">
   <% _.each( todos, function(item){ %>
        <% if ( item.completed == true ){ %>
            <li class="done">
                <a href="#" class="action restore">restore</a>
                <span class="title"><%= item.title  %></span>            
            </li>
        <% } else { %>
            <li class="todo">
                <a href="#" class="action delete">delete</a>
                <span class="title"><%= item.title  %></span>            
            </li>
        <% } %>
    <% }); %>
</script>

CSS

html{ background-color : 'yellow' }
.todo-app ul{
    display:block;
    padding:0;
    margin:0;
    list-style:none;
}
.todo-app li{
    display:block;
}
.tmpl{
    display:none;
    visible:none;
}

li.completed {
    background:green;
}
li.todo{
    background:red;
}

JavaScript

/**
* Create application wrapper
*/
var app = {};

/**
* Application models are defined here
*/

/**
* Application models are defined here
*
*
*
*/
app.todo = Backbone.Model.extend({
    // Default attributes for the todo
    // and ensure that each todo created has `title` and `completed` keys.
    defaults: {
        id: null,
        title: '',
        completed: false
    }   
});

// collections são criadas fora do objecto "app"
var Todos = Backbone.Collection.extend({
		// Reference to this collection's model.
		model: app.Todo
});

// create a new instance of our collection in our app object
app.todos = new Todos();

/*app.todos.on('change', function(model,item){
    console.log(model, item);
});*/

app.todos.set(new app.todo({title:'dogs', completed:true}));




app.AppView = Backbone.View.extend({
    el:'.todo-app',
    tmpl: $('#tmpl-todo-app').text(),
    events:{
        'click a.add-item' : 'add',
        'click a.remove-last':'remove_last',
        'submit .todo-form' : 'submitting'
    },
    initialize: function(){
        //this.listenTo(app.todos, 'all', this.render);
        this.render();
    },
    render: function(){
        this.$el.html( this.tmpl );
        //render subview
    },
    submitting: function(e){
        e.preventDefault();
        console.log("form-being-submitted");
           
        var $_el = $(e.currentTarget),
            todo_msg = $_el.find('input[type="text"]').val();
        
        var is_done = false;
        
        if ("on" == $_el.find('#isdone:checked').val()) { is_done= true} else { is_done = false};
        
        app.todos.add(new app.todo({'completed':is_done,'title':todo_msg}));
//        console.log( completed, todo_msg );  
        console.log(app.todos.toJSON());
    },
    remove_last: function(){
        var my_data = app.todos.toJSON();
        //console.log(my_data[0]);
        app.todos.remove(my_data[my_data.length-1], {'silent':true});
    }
});

new app.AppView();

app.todoView =...