Foo
入力フィールドのあるビューと、ボタンのあるラッパービューがBar
あります。
入力に何かを書き込んでボタンを押すと、Foo のモデルの「変更」イベントがトリガーされ、次にバーの「クリック」ボタンがトリガーされますが、最初のイベントのみが発生します。できれば正しい順序で両方をトリガーする方法はありますか?
ありがとう!
Foo
入力フィールドのあるビューと、ボタンのあるラッパービューがBar
あります。
入力に何かを書き込んでボタンを押すと、Foo のモデルの「変更」イベントがトリガーされ、次にバーの「クリック」ボタンがトリガーされますが、最初のイベントのみが発生します。できれば正しい順序で両方をトリガーする方法はありますか?
ありがとう!
うーん、少し混乱しています。バックボーンプラグを使用しない場合、ワークフローは異なります。
画面上で何かを押すと、モデルではなくビューでイベントが発生します。そのイベントを聞いて、それに応じてモデルを更新する必要があります。モデルに新しい値を設定すると、change
モデルイベントが発生します。
Foo
たとえば、サブビューBar
とモデルのビューがありますBoo
。両方のビューが同じモデルオブジェクトを使用しています。
Bar
ビューでは、
events: {
'click .button': 'onButtonClicked';
}
onButtonClicked: function () {
var value = this.$el('.input').val();
this.model.set({ someValue: value});
}
ビューではFoo
、モデルの変更を聞くことができます
initialize: function () {
this.model.on('change:someValue', this.onSomeValueChanged);
}
あなたができることで、this.onSomeValueChanged
あなたが好きなことは何でも。
繰り返しますが、質問/設定を確認してください。あなたの質問に基づいて、これはあなたが持っているセットアップです。Foo.model
バーのTHEN トリガーclick
イベントを変更します。
<div id="Bar">
<div id="Foo">
<input type="text">
</div>
<button id="barButton">Update</button>
</div>
ちょっと変わった設定です。@alexanderbは、私が問題全体について考える方法を示していますが、状況のコンテキストについて私が知らないことをあなたが知っていると仮定して、あなたのシナリオで私が何をするかを説明します! :-)
Foo.modelchange
でトリガーされ、その後に Bar ボタンでクリック イベントが発生するようにする場合は、Foo ビューからボタン クリックを手動でトリガーするだけで済みます。これを行うには、いくつかの方法のいずれかを実行できます。1 つ目は、親 (バー) ビューのイベントを直接トリガーすることです。
// When you create your Foo subview, you pass in the parent view so you can access it
var foo = new Foo({
'parent': this // this = the barView assuming you're creating FooView inside BarView
});
// In Foo after you set your model attribute, you access the parentView
this.options.parent.$el.find('#barButton').click(); // Manually trigger the click event
// or
this.options.parent.onButtonClick() // Manually run the event handler bypassing the event
これにより、指定した DOM コンテキストで change イベントの後にボタン クリック イベントが続くという要求が満たされます。(この場合の理由はわかりませんが、似たようなことが望まれるいくつかのシナリオを想像できます。)
2 つ目の方法は、ビューが互いにイベントを送受信できるようにするイベント アグリゲーター パターンを使用することです。このシナリオでは、モデルを更新すると、親の Bar ビューによってリッスンされるイベントがトリガーされ、その上でハンドラーが実行されると、Foo ビューが発生します。
バックボーンのイベント アグリゲーター パターンの詳細については、こちらを参照してください: イベント アグリゲーターの説明
正直なところ、あなたの特別なセットアップについて私たちが知らないことが他にない限り、アレクサンダーブの答えがこの状況に最適なものだと本当に思います. ただし、この 2 つを見て比較し、特定のコンテキストで 1 つのセットアップが適切な場合とその理由を理解していただければ幸いです。