カスタムデータでイベントを拡張して伝播する前に

Question

別のビュー（OuterView）内でレンダリングされるバックボーンビュー（InnerView）があります。どちらもclickイベントのイベントハンドラを含み、イベントデリゲーションは（デフォルトで）有効になっています。

InnerViewは、それがさらに伝播する前にイベントにデータを追加したいと思います。それはその後の未定義のまましかし、—以下に示すように、コード—は、全くe.dataに影響を与えていないようだ。

var InnerView = Backbone.View.extend({ 
    events: { 
    "click": "onClick" 
    }, 
    render: function() { 
    // ... 
    }, 
    onClick: function (e) { 
    e.data = e.data || {}; 
    e.data.myData = 123; 
    console.log(e.data); // Object { myData: 123 } 
    } 
}); 

var OuterView = Backbone.View.extend({ 
    events: { 
    "click": "onClick" 
    }, 
    render: function() { 
    // ... 
    this.$el.append(new InnerView); 
    // ... 
    }, 
    onClick: function (e) { 
    console.log(e.data); // undefined 
    } 
}); 

私が伝播した後、カスタムデータでそれを再トリガからのイベントを停止しようとした（されるであろう私はここでイベントオブジェクトにデータを追加する方法を見ることができないように）多少異なるフォーマットで保存された：

// alternative version of InnerView#onClick() 
onClick: function (e) { 
    e.stopImmediatePropagation(); 
    this.trigger('click', {myData: 123}); 
} 

しかし、その後OuterViewは全くクリックイベントを受信して​​いません。

どのようにこの問題に対処しますか？イベントビューアでイベントを直接トリガすることはできません（またはメソッドを呼び出す、またはプロパティを設定することはできません）。この2つは互いに公開されないためです（イベントメカニズムを利用することに決めました）。

Answer 1

this.trigger()は、jQueryのものではなく、バックボーンのイベントAPIを使用しているため、使用できません。 InnerViewからこのイベントをリッスンするにはOuterViewが必要ですが、前述のようにビューは互いに公開されません。

DOMの上にデータを送信したい場合は、あなたは正しい道でjQuery's triggerに向いていると思います。

onClick: function() { 
    this.$el.trigger('custom', { 
     myData: 123 
    }); 
} 

この方法では、クリックイベントの伝播は通常通り進むことができ、OuterViewは、カスタムイベントのために特別を聞くことができます：しかし、私はInnerViewからカスタムイベントをトリガーする

events: { 
    "custom": "onCustom" 
}, 

onCustom: function (e, data) { 
    console.log(data.myData); //123 
} 

さらに、カスタムデータをイベントハンドラの2番目のパラメータとして渡すと便利です。