jquery - 向 el 元素添加点击事件并从 Backbone 中的 DOM 中删除

Question

在本例中，我如何将点击事件添加到我的 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?
    }

});

Answer 1

来自fine manual :

delegateEvents delegateEvents([events])

[...] Omitting the selector causes the event to be bound to the view's root element (this.el).

el您的 View 是<li>您想要一个点击处理程序，因此您应该能够将选择器放在 events 中:

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

这将绑定(bind) removeMe点击<li>本身。

您还设置 el: 'li'当你想说tagName: 'li'时。 el property 是 View 的 DOM 元素，但是 'li'不会做任何有用的事情。如果指定tagName那么 Backbone 将创建 <li>为您和this.el将是 View 的单个 <li> 。这可能就是您所看到的奇怪的“看起来像所有 <li> s”行为的来源。

您的 View 应该看起来更像这样:

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/