1

在这种情况下，如何将点击事件添加到我的 el 元素中多个 li。我正在尝试在单击时从 dom 中删除 li，但单击事件未触发。

App.Views.ListItem = Backbone.View.extend({

    el : 'li',
    Wrapper : '#list_cntr ul',
    template : 'tmplItem',

    events : {
        'click li' : 'removeMe'
    },

    initialize : function() {

        this.render();
    },

    render : function() {
        $(this.Wrapper).prepend($(this.el).html(App.Templates[this.template](this.model.toJSON())));
    },

    removeMe : function() {
        var eventList = App.Collections.eventCollectionList;
        var eid = this.model.get('id');
        eventList.remove(eid);

       //How to remove the li?
    }

});
4

1 回答 1

3

来自精美手册：

委托事件 delegateEvents([events])

[...] 省略选择器会导致事件绑定到视图的根元素 ( this.el)。

您的el视图是<li>您想要点击处理程序的，因此您应该能够将选择器放在您的events：

events : {
    'click' : 'removeMe'
},

这将绑定removeMe到点击<li>本身。

el: 'li'当你想说的时候，你也在设置tagName: 'li'。该el属性是您视图的 DOM 元素，但'li'不会做任何有用的事情。如果您指定 atagName那么 Backbone 将为<li>您创建 并且this.el将是视图的单一<li>。这可能就是您看到的奇怪的“看起来像所有<li>s”行为的来源。

您的视图应该看起来更像这样：

App.Views.ListItem = Backbone.View.extend({
    tagName : 'li',
    //...
    events : {
        'click' : 'removeMe'
    },
    //...
    removeMe : function() {
        var eventList = App.Collections.eventCollectionList;
        var eid = this.model.get('id');
        eventList.remove(eid);
        this.remove();
    }
});

演示：http: //jsfiddle.net/ambiguous/MTh57/

于 2012-12-16T05:24:08.617 回答