1

この場合、複数のliの場合、el要素にクリックイベントを追加するにはどうすればよいですか。クリック時に 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'。プロパティはビューのelDOM 要素ですが、'li'何も役に立ちません。を指定するとtagName、Backbone が を作成し、ビューの単一の になり<li>ます。これはおそらく、あなたが目にしている奇妙な「すべてが s のように見える」動作の原因です。this.el<li><li>

ビューは次のようになります。

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 に答える