Question

如何在这种情况下将click事件添加到我的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])

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

您的观点的el是您想要点击处理程序的<li>，因此您应该可以将选择器放在events中：

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

这会将removeMe绑定到<li>本身的点击次数。

如果您想el: 'li'，还可以设置tagName: 'li'。 el属性是您视图的DOM元素，但'li'不会执行任何有用的操作。如果您指定tagName，则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/

将click事件添加到el元素并从骨干中的DOM中删除

1 个答案: