backbone.js - Backbone.Marionette のネストされた CompositeViews からのイベントのキャプチャ

Question

ああ、私はすでに解決策を見つけました...下にスクロールして表示します。

バックボーン マリオネットで解決策が見つからない問題が発生しています。

ネストされたビュー構造を構築して、Twitter Bootstrap で使用されているようなアコーディオン ビューを表示します。これは、ItemView を別の CompositeView (アコーディオン グループ) に設定し、ItemView をItemView (アコーディオン グループ アイテム)。それは正常に表示され、機能します。これはソースの単純化されたコピーです (アプリケーションの別の場所に抽象的なアコーディオン ビューがありますが、これは構造を把握するためのものです)。

外側のアコーディオン:

    // Marionette CompositeView 
    Accordion.View = app.Common.View.Component.Accordion.View.extend({
        tagName : 'div',
        className : 'accordion',
        itemViewContainer : 'div.accordion-groups',
        template: '#accordion_template',
        itemView : Accordion.ViewGroup,
        emptyView : Accordion.ViewEmpty
    });

アコーディオン グループごとに表示するビュー:

    // Marionette CompositeView 
    Accordion.ViewGroup = app.Common.View.Component.Accordion.ViewGroup.extend({
        tagName : 'div',
        className : 'accordion-group',
        itemViewContainer : 'ul',
        template: '#accordion_template_group',
        itemView : Accordion.ViewGroupItem,
        emptyView : Accordion.ViewGroupEmpty
    });

    // Marionette ItemView  
    Accordion.ViewEmpty = app.Common.View.Component.Accordion.ViewEmpty.extend({
        template: '#accordion_template_empty'
    });

グループ内で表示するアイテム:

    // Marionette ItemView  
    Accordion.ViewGroupItem = app.Common.View.Component.Accordion.ViewGroupItem.extend({
        triggers : {
            'mouseover' : 'mouseover'
        },
        template: '#accordion_template_group_item',
        tagName : 'li'
    });

    // Marionette ItemView  
    Accordion.ViewGroupEmpty = app.Common.View.Component.Accordion.ViewGroupEmpty.extend({
        template: '#accordion_template_group_empty',
        tagName : 'li'
    });

グループ内のアコーディオン アイテムの上にマウスを移動すると、最下位レベルでmouseover、中央の CompositeView でitemview:mouseover、外側の CompositeViewで itemview:itemview: mouseoverという名前のトリガーが起動されます。これらは何が起こっているかを特に説明するものではないので、トリガー名を変更したいと思います。私には簡単そうに見えますが、うまくやり遂げることができず、何かを見落としているような気がします。

私が達成したいことは次のとおりです。最も深くネストされた ItemView 内でイベントがトリガーされると、たとえば上記の「mouseover」のように、モデルをデータとしてgroup:item:mousoverという名前のトリガーを最も外側の CompositeView で起動させたいと考えています。この場合、アコーディオン ビューを別のビューの下にネストすると、より意味のある名前が付けられます。

あなたの誰かが助けてくれることを願っています。ありがとう！

--

今のところの解決策:

    Accordion.View = app.Common.View.Component.Accordion.View.extend({
        tagName : 'div',
        className : 'accordion',
        itemViewContainer : 'div.accordion-groups',
        template: 'common/view/entitycomponent/set/accordion/accordion_template',
        itemView : Accordion.ViewGroup,
        emptyView : Accordion.ViewEmpty,

        // I've added the following
        onCompositeRendered : function() {
            this.on('itemview:itemview:mouseover',function(view) {
                this.trigger('group:item:mouseover',view);
            });
        }
    });