todo.js

$(function() {  
        "use strict";

	// Model. Als toggle gecalled word zal done geinvert worden. Ook word de titel aangepast zodat de view opnieuw rendert.
	var Todo = Backbone.Model.extend({
		defaults: {
			title: "Something to remember",
			done: false
		},

		toggle: function(){
			this.set({
                            done: !this.get('done'),
                            title: 'de toggle is gecalled'
                        }); 
		}
	});

        // Als er op het element van deze view geklikt word, wordt de model getoggled.
	var TodosView = Backbone.View.extend({
		events: {
			"click": "toggleModel"
		},

                // Initialiseert de model op deze view, en start het luisteren naar de change event op deze model.
		initialize: function(options){
                        this.model = options.model || new Todo();
			this.listenTo(this.model, 'change', this.render);

                        // Zorg er voor dat de 'this' in toggleModel de instance van de view is, en niet de 'window'.
                        _.bindAll(this, 'toggleModel');
		},

                // Rendert de html in de element van de view (this.$el).
		render: function(){
			this.$el.html(this.model.get('title'));

                        // Return this zodat we calls kunnen "chainen". Dus bijvoorbeeld view.render().$el kunnen doen,
                        // wat hetzelfde is als:
                        //  view.render();
                        //  view.$el;
                        return this;
		},

                // Deze callback word gecalled als er geklikt wordt op het element van de view.
                toggleModel: function() {
                        this.model.toggle();
                }
	});

        // maak een nieuw Todo object, en een nieuwe view.
        var model = new Todo();
	var view = new TodosView({
            model: model
        });

        // Render de view voor de eerste keer en stop deze in het document.
        $('body').append(view.render().$el);
});