4

MarionetteJS v1.0.3 を使用。

2 つのリージョンを持つ a のインスタンスがありますMarionette.Layout。

最初の領域はCompositeView左側にあり、他の領域はItemView右側にあります。

CompositeView は、複数の ItemView をレンダリングします。

アイデアは、ユーザーが左側のコレクション内の項目の 1 つをクリックして、選択したレコード全体を右側の ItemView に表示するというものです。

上部のレイアウトがチェーン内のイベントにサブスクライブするにはどうすればよいですか: Layout > Region > CompositeView > ItemView

上部のレイアウトは右側の詳細な領域を認識する唯一のレイアウトであるため、クリック イベントがトリガーされる CompositeView からずっとここでイベントを消費する必要があります。グローバルなイベントがあることは知っていますが、それらはグローバルであり、一度に複数のレイアウトが実行されている可能性があるため、それらのイベントが衝突します。

LeftListPanelView = Marionette.CompositeView.extend({

    template: "#leftPanel",
    itemViewContainer: "ul",

    events: {
        "click li": "rowClicked"
    },

    rowClicked: function (e) {
        var itemid = $(e.currentTarget).data("itemid") * 1;
        var selectedItem = this.collection.get(itemid);

        if (selectedItem) {
            this.trigger("itemSelected", selectedItem);
        }
    }
});
4

2 に答える 2

10

つまり、次のように表示した後、そのイベントにバインドできCompositeViewますLayout。

yourLayout.region.currentView.on('item:clicked', yourFunction);

これは、グローバル イベントを使用するよりもはるかに優れたソリューションです。グローバル イベントは、「これはアプリケーションの状態にグローバルに関連するイベントである」というセマンティックな推論のために機能し、(私の意見では) 実際には、プロジェクト アーキテクチャが混乱してリファクタリングが必要な場合にのみ使用する必要があるアンチ パターンを表します。 .

イベントに関する最善のアプローチは、イベントが内部で発生したオブジェクトから常にイベントをトリガーし、それらをトリガーするオブジェクトのイベントを常に監視することです。

于 2013-07-14T23:14:57.197 に答える
7

イベントを使用するだけです。ユーザーがアイテムをクリックすると、 でイベントがトリガーされますMyApp.trigger("item:clicked", myItemInstance)。次に、レイアウトで、イベントをリッスンするだけです

MyApp.on("item:clicked", function(myItemInstance){
   // do stuff
});

itemView バブルからコレクション/複合ビューまでのイベントを「自動的に」トリガーすることもできます ( https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#itemviewを参照)。 -event-bubbling-from-child-views )

イベントを使用してアプリの動作を制御する例は、https ://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js で確認できます。

そのコードは、私がマリオネットについて書いている本から抜粋したものです: https://leanpub.com/marionette-gentle-introduction (無料サンプルはこちら: http://samples.leanpub.com/marionette-gentle-introduction-sample. pdf )

于 2013-05-31T07:24:00.117 に答える