Backbone.js：单击时访问特定项目

Question

Noob在这里学习ribs.js。 我试图创建一个简单的水平菜单（每个菜单项是一个模型，整个菜单是一个集合）。 我想知道单击了哪个菜单项。 在menuItemView中，我将“ click a”事件绑定到“ clicked”函数，但是单击时不会触发。 我找到的最接近的解决方案是： http : //lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/ ，我尝试复制类似的内容功能...尽管我认为我已经复制了几乎相同的内容，但我似乎仍然无法使其正常工作。 我确实浏览了所有似乎解决了检测单击哪个模型/项目的问题的帖子，但是似乎都没有帮助。 任何帮助，将不胜感激。 我知道在简单的jquery中，可单击菜单及其ID可能要简单得多，但我想我将以此为例来学习骨干。

的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);

可以在jsfiddle上看到正在运行的示例：..参见http://jsfiddle.net/gopal_a/4uzcb/3/

Answer 1

您的问题就在这里：

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

您的window.app.menuview.el已经存在于DOM中，因为您已经这样定义它：

el: $("header > ul")

当您$('header').html(...) ，您要清除<header>已有的内容，然后将其替换为el ; 但是，您的.html()调用会杀死Backbone安装来处理视图事件的事件委托。 结果是您最终在DOM中使用了正确的HTML，但是没有附加任何事件处理。

放下$("header").html(window.app.menuview.el) ，事情就会开始起作用。

$(this.el)说$(this.el) ，您不必说$(this.el) ，主干视图已经定义了this.$el因此可以使用this.$el 。