Backbone.js : Access specific item when clicked
===

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/ 




