Question

Aaaargh我已找到解决方案...... 滚动到底部查看。

我遇到了Backbone Marionette的问题，我似乎无法找到解决方案。

我已经构建了一个嵌套的视图结构来显示在Twitter Bootstrap中使用的手风琴视图，它包含一个外部的CompositeView（Accordion外部），它的ItemView设置为另一个CompositeView（Accordion组），后者又有它的ItemView设置为ItemView（Accordion组项）。它显示和功能很好。这是源代码的简化副本（我在我的应用程序的其他地方有一个抽象的手风琴视图，但这只是为了了解结构）：

外手风琴：

    // 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上的strong> itemview：itemview：mouseover 。这些并不特别描述正在发生的事情，因此我想更改触发器名称。对我而言，它看起来很简单，但我无法正确完成它，我感觉我忽略了一些东西。

我想要实现的目标如下。当在最深层嵌套的ItemView中触发事件时，例如上面显示的'mouseover'，我希望最外层的CompositeView触发一个触发器，例如使用模型作为数据命名为 group：item：mousover 。在这种情况下，如果我将手风琴视图嵌套在另一个视图下，它将具有更重要的名称。

希望你们中的任何人都可以提供帮助。谢谢！

-

现在的解决方案：

    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);
            });
        }
    });

Answer 1

您基本上有两个选择：

在您收听“itemview：itemview：mouseover”时触发代码中的“group：item：mousover”事件
重命名复合视图中的itemViewEventPrefix（请参阅https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-itemvieweventprefix）：将中间复合视图设置为使用“item”，将外部复合视图设置为使用“group”。然后，外部复合视图应在鼠标悬停时获得“group：item：mousover”事件

从Backbone.Marionette中的嵌套CompositeViews捕获事件

1 个答案: