Question

I’m trying to learn Backbone.js. I’ve been stuck on this for a whole hour. I don’t get why my event would not fire..

JSFIDDLE: http://jsfiddle.net/jancarlo000/ejn2J/

JSBIN: http://jsbin.com/efefip/3/edit

see ItemView the one starting on this section:

var ItemView = Backbone.View.extend({ ....

FULL CODE:

var Item = Backbone.Model.extend({ defaults: { Task: 'Study!'} });
var List = Backbone.Collection.extend({});

var MainView = Backbone.View.extend({
    tagName: 'ul',
    className: '',
    initialize: function(){
        _.bindAll(this, 'render');
        window.list = new List();
        window.list.bind('add', this.render, this);
    },
    render: function(model, collection, options){
        var itemView = new ItemView({model:model});
        $(this.el).append(itemView.el);
        $('body').html(this.el);
        return this; 
    }
});

//-------------- PROBLEM HERE -------------------------------
var ItemView = Backbone.View.extend({
    tagName: 'li',
    events: {
        "click #deleteMe":"deleteMe" //<-- this doesn't fire!
    },
    initialize: function(){
        _.bindAll(this, 'render');
        this.render();
    },
    render: function(){
        $(this.el).append(this.model.get('Task') + 
                              '<button id="deleteMe">Delete Me</button>'); 
            //WHY WON'T THIS FIRE!!!
        return this;
    },
    deleteMe: function(e){
        console.log('called deleteMe');
        $(this.el).remove();
    }
});
//------------------------------------------------------------

$(function(){

var app = new MainView();
var first = new Item({Task:'Learn JavaScript'});
var second = new Item({Task:'Learn HTML5'});
var third = new Item({Task:'Learn Backbone.JS'});
var fourth = new Item({Task:'Learn .NET MVC'});
list.add([first, second, third, fourth]);

});

Answer 1

In your main view render, you use $('body').html(this.el); which replaces the views and their event handlers with unbound elements.

Removing this line and appending the main view el to the body in the initialize method gives the intended result

var MainView = Backbone.View.extend({
    tagName: 'ul',
    className: '',
    initialize: function(){
        _.bindAll(this, 'render');
        window.list = new List();
        window.list.bind('add', this.render, this);
         $('body').append(this.el);
    },
    render: function(model, collection, options){
        var itemView = new ItemView({model:model});
        $(this.el).append(itemView.el);
        console.log($(this.el));

        return this;
    }
});

http://jsfiddle.net/ejn2J/6/

And if I may, a few opinions

• don’t create your Collection in your view, create it in your init code and pass it to your view, the view should not be responsible for creating the models/collections of your app and you may need to reference the collection somewhere else,
• your MainView render should be used to re-render the whole list, not a lone model: its purpose is to maintain the UI display of the collection, you probably will need at a later time to add/edit/delete a model and refresh its representation
• don’t tie your MainView to the body in the view code, build the view in memory and then append its el to its parent, it’s faster and much easier to move around at a later time

http://jsfiddle.net/ejn2J/7/