Question

Noob here learning backbone.js. I was trying to create a simple horizontal menu (each menu item is a model and the whole menu is a collection). I would like to know which menu item was clicked. In menuItemView, I bind the “click a” event to a “clicked” function, but it does not fire when I click. I closest solution to this I found was at: http://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/ and I tried to replicate similar functionality … even though I think I have copied it almost same, I still can’t seem to get it to work. I did go through all the posts that seem to address the issue of detecting which model/item got clicked, but none of them seemed to help. Any help would be appreciated. I know that a clickable menu and getting its id is probably a lot more straightforward in simple jquery, but I thought I would use this as an example to learn backbone.

HTML

<header>
<ul id="nav">
</ul>
</header>

JAVASCRIPT

(function($) {

window.app = window.app || {};

//Goal:if selected=true, menu item should be highlighted
MenuItem = Backbone.Model.extend({
    label: "Default Label",
    selected: false,
    id: 0
});

MenuList = Backbone.Collection.extend({
    model: MenuItem,
    initialize: function(models, options) {
        //nothing ... yet
    }
});


//View for a single item. Returns el that looks like:
//  <li id='4' class='false'><a href='#4'> Item 4 </a> </li?
MenuItemView = Backbone.View.extend({
    tagName: "li",

    render: function() {
        var id  = this.model.get("id");
        var cls = this.model.get("selected");
        var lbl = this.model.get("label");
        $(this.el).attr('id', id).addClass(cls.toString());
        $(this.el).html("<a href=#" + id + " >" + lbl + "</a> </li>");
        return this; //recommended as this enables calls to be chained.
    },

    events: {
        "click a": "clicked" //Firebug shows 'a' element bound to
                             //native 'click' and not 'clicked'. WHY?
    },

    clicked: function(ev){
        alert($(ev.target).text()); //NOT HAPPENING :-(
        //do something to highlight menu item via css stuff.
    }
});

MenuListView = Backbone.View.extend({
    el: $("header > ul"),

    initialize: function() {
        this.menulist = new MenuList(null, { view: this });
        _.bindAll(this, "renderItem");
    },

    renderItem: function(model) {
        var menuitemView = new MenuItemView({ model: model });
        menuitemView.render();
        $(this.el).append(menuitemView.el);
    },

    render: function() {
        this.collection.each(this.renderItem);
    },

    setActivePage: function(ev) {
        alert($(ev.target).text());
        window.app.footerview.updatePageNumber(10);
    }
});


var items = new MenuList([
{id: 1, label: "item 1", selected: true},
{id: 2,label: "item 2",selected: false},
{id: 3,label: "item 3",selected: false},
{id: 4,label: "item 4",selected: false}
]);


window.app.menuview = new MenuListView({ collection: items });
window.app.menuview.render();
$("header").html(window.app.menuview.el);

})(jQuery);

The running example for this can be seen at jsfiddle: .. see http://jsfiddle.net/gopal_a/4uzcb/3/

Answer 1

Your problem is right here:

$("header").html(window.app.menuview.el);

Your window.app.menuview.el is already in the DOM since you’ve defined it like this:

el: $("header > ul")

When you $('header').html(...), you’re clearing out what’s already in <header> and then replacing it with your el; but, your .html() call kills the event delegators that Backbone installs to handle events on the views. The result is that you end up with the right HTML in the DOM but you don’t have any event handling attached to them.

Drop your $("header").html(window.app.menuview.el) and things will start to work.

As an aside, you don’t have to say $(this.el), Backbone views already have this.$el defined so you can use this.$el instead.