appview.js

    global.views.AppView = Backbone.View.extend({
        el: $('body'),

        events: {
            "click .add-btn": "add_task"
        },

        add_task: function() {
            var task_description = this.$el.find('input').val();
            var tm = new global.models.Task({ text: task_description });
            var tv = new global.views.TaskView({model: tm});

            this.$el.find('ul').append(tv.render().el);
            this.$el.find('input').val('');
        }
    });

collection.js

    global.models.TasksGroup = Backbone.Collection.extend({
        model: global.models.Task
    });

counter.js

   global.views.CounterView = Backbone.View.extend({
        tagName: 'div',
        className: 'counter',

        initialize: function(opts) {
            this.tasks = opts.tasks;
        },

        render: function() {
            console.dir(this.el);
            this.$el.html( this.template( { count: this.tasks.length }));
            return this;
        },

        template: Handlebars.compile( $('#counter-template').html() )
    });

task.js

(function(global) {

    global.models.Task = Backbone.Model.extend({
        defaults: {
            completed: false,
            text: ''
        }
    });

}(this));

taskview.js

   global.views.TaskView = Backbone.View.extend({
        tagName: "div",
        className: "task",

        events: {
            "click" : "handle_click"
        },


        initialize: function(opts) {
            this.model.on('change', this.render, this );
        },

        handle_click: function() {
            if ( this.model.get('completed') ) {
                this.model.set('completed', false);
            } else {
                this.model.set('completed', true);
            }
        },

        render: function() {
            this.$el.html( this.template( this.model.toJSON()));
            return this;
        },

        template: Handlebars.compile($('#task-template').html())
    });