1

次のようないくつかのイベントを定義するビューがあります。

events: {
    'click .js-icon-remove': 'removeFilter',
    'change .select-control': 'updateFilters',
    'click #btn_search': 'requestSearch',
    'click #btn_add_search': 'requestSaveSearch'
}

3 つのクリック イベントはボタンまたはリンク上にあり、変更イベントはドロップダウン上にあります。ビューが最初にレンダリングされると、すべてのイベントが正常に機能します。ただし、別のページに移動してからこのビューに戻ると、ドロップダウン イベントが失われます。ブラウザをリロードすると、問題なく動作します。初めてだけでなく、何度でも問題なく動作します。イベントバインディングが失われたのは、ビューを再レンダリングしたときだけです。

イベントを変更からクリック、またはクラスから要素 (.select-control ではなく選択) に変更しようとしました。ビューが最初にレンダリングされたときにすべてが機能し、それだけです。

4

1 に答える 1

0

これは、Backbone と DOM でイベント バインディングがどのように機能するかについて説明しています。

ビューがレンダリングされ、その $el が DOM に追加されると、バックボーンはイベントを自動的にバインドします。ただし、ビューの $el を dom から削除すると、$el が dom に再び追加されたときに、これらのイベントを再バインドする必要があります。これが、delegateEvents() メソッドが行っていることです。

バックボーンで作業するときのベスト プラクティスは、ビューを破棄できるようにすることです。たとえば、DOM から削除された後はビューを保持しないでください。ビューから移動して DOM から削除してから戻る場合は、ビューを再インスタンス化してレンダリングし、再び DOM に追加する必要があります。モデルとコレクションを保持できるため、データを再取得する必要はありませんが、ビューは dom に残しておくか、追加/削除するたびに再作成する方がうまく機能します。

Marionette.js を強くお勧めします。具体的にはリージョン クラスです。ビューの処理に関しては、ボイラープレート コードを大幅に節約できます。

于 2013-10-02T16:35:13.507 に答える