8

複数のbackbone.jsビューを備えた単一ページのWebアプリがあります。ビューは、相互に通信する必要がある場合があります。2つの例：

  1. ビューが異なる方法で同時にコレクションを表示する2つの方法があり、一方のビューでアイテムをクリックすると、もう一方のビューに中継される必要があります。
  2. ユーザーがプロセスの次の段階に移行し、最初のビューがデータを2番目のビューに渡す場合。

ビューを可能な限り分離するために、現在、カスタムイベントを使用してデータを渡します（$(document).trigger('customEvent', data)）。これを行うためのより良い方法はありますか？

4

3 に答える 3

15

広く使用されている手法の1つは、Backbone.Events-objectを拡張して、個人のグローバルイベントアグリゲーターを作成することです。

var vent = {}; // or App.vent depending how you want to do this
_.extend(vent, Backbone.Events);

requirejsなどを使用しているかどうかに応じて、これを独自のモジュールに分割するか、Applicationオブジェクトの属性にすることができます。これで、アプリ内のどこからでもイベントをトリガーして聞くことができます。

// View1
vent.trigger('some_event', data1, data2, data3, ...);

// View2
vent.on('some_event', this.reaction_to_some_event);

これにより、イベントアグリゲーターを使用して、モデル、コレクション、ルーターなどの間で通信することもできます。これは、イベントアグリゲーター（javascriptではない）に関するMartinFowlerの概念です。そして、これはBackbone.Marionetteの静脈での主題に関するよりバックボーンな実装と考察ですが、そのほとんどはバニラバックボーンに適用できます。

これがお役に立てば幸いです。

于 2012-07-23T10:02:48.400 に答える
8

私は最初の部分で@jakeeに同意します

var vent = {}; 
_.extend(vent, Backbone.Events);

ただし、「オン」でグローバルイベントをリッスンすると、メモリリークやゾンビビューの問題が発生する可能性があり、複数のアクションハンドラー呼び出しなども発生する可能性があります。

「on」の代わりに、ビューで「listenTo」を使用する必要があります

 this.listenTo(vent, "someEvent", yourHandlerFunction);

したがって、によってビューを削除するとview.remove()、ハンドラーはビューにバインドされているため、このハンドラーも削除されます。

グローバルイベントをトリガーするときは、

vent.trigger("someEvent",parameters);
于 2014-05-25T00:32:43.737 に答える
0

jakeeの答えは、私自身が使用した優れたアプローチを示唆していますが、別の興味深い方法があります。それは、オブジェクトへの参照を各ビューインスタンスに挿入し、挿入されたオブジェクトに必要な数のビューへの参照を含めることです。集計。

本質的に、ビューアグリゲーターは一種の「アプリ」オブジェクトであり、コレクションなど、ビュー以外のものをアタッチできます。それはビューを拡張することを含むので、誰もが好むとは限らないかもしれませんが、一方で、拡張はそうするための簡単な例として役立ちます。

ListViewのベースとしてhttp://arturadib.com/hello-backbonejs/docs/1.htmlのコードを使用したところ、次のコードが機能するようになりました。

define(
    ['./listView'],

    function (ListView) {
        var APP = {
            VIEWS : {}
        }

        ListView.instantiator = ListView.extend({
            initialize : function() {
                this.app = APP;
                ListView.prototype.initialize.apply(this, arguments);
            }
        });

        APP.VIEWS.ListView = new ListView.instantiator();
        console.log(APP.VIEWS.ListView.app);
    }
);
于 2013-11-21T22:09:28.203 に答える