events - Backbone.js：発生しないイベントを動的に追加する

Question

私はBackbone.jsを試してみて、これまでうまくやっていますが、問題があります。

ルート要素と子要素を取得したとしましょう。

ドキュメントが読み込まれると、3つの「ルート」インスタンスが作成されます。ルートインスタンスはタグを追加します。各ルートインスタンスは、1つの子インスタンスを作成します。

ulタグのタグ。

次に、子インスタンスにイベントをアタッチしてonclickイベントをアタッチします。

鬼ごっこ。残念ながら、それは機能しません。

私はフィドルを作成しました：

http://jsfiddle.net/Fluxo/sEjE5/17/

var child = Backbone.View.extend({
    template: _.template('<li>Item '+count+'</li>'),
    events: {
        'click li': function() {
         alert('listitem Click Child Element');   
        }
    },
    initialize: function() {
      _.bindAll('render');  
     this.render();   
    }, render: function() {
        this.$el.html(this.template())
    }
});

var root = Backbone.View.extend({
    template: _.template('<div><h3>List</h3><p /><ul></ul><hr />'),
    events: {
        'click li': function() {
         alert('listitem Click - Root Element');   
        }
    },
    initialize: function() {
        _.bindAll('render');
        this.render();
    },
    render: function() {
        this.$el.html(this.template());
        $('body').append(this.el);
        var item = new child();
        this.$el.find('ul').append(item.$el.html());

    }
});

ルート要素で作成されたイベントは発生しますが、子要素で作成されたイベントは発生しません。

私は何か間違ったことをしていますか？

Answer 1

あなたは2つの間違ったことをしています。

まず第一に、あなたchildはです<li>、それは含まれていません<li>：

template: _.template('<li>Item '+count+'</li>'),
events: {
    'click li': ...
},

そのため、click liイベントは何もしません。イベントは、ビューのel使用delegateにバインドされます：

デリゲートイベント delegateEvents([events])

jQueryのdelegate関数を使用して、ビュー内のDOMイベントの宣言型コールバックを提供します。[...]selector原因を省略すると、イベントがビューのルート要素（this.el）にバインドされます。

したがって、クリックハンドラーelをその子の1つではなく、ビューに直接バインドする場合は、セレクターを省略します。

events: {
    'click': ...
}

次の問題は、実際にchild要素をDOMに挿入しているのではなく、HTMLをコピーしていることです。

this.$el.find('ul').append(item.$el.html());

item.$el.html()の代わりに追加することでitem.el、正しいHTMLを文字列として取得し、そのHTMLを挿入しますが、その過程でイベントが失われます。item.elイベントは、HTML文字列ではなく、DOMオブジェクトにバインドされます。これを修正するには、次を追加しitem.elます。

this.$el.find('ul').append(item.el);
// Or you could say, the two approaches are the same
this.$('ul').append(item.el);

デモ： http： //jsfiddle.net/ambiguous/K76JM/（またはhttp://jsfiddle.net/ambiguous/kFxHQ/）