從Backbone.Marionette中嵌套複合視圖捕獲事件

Aaaargh我找到了一個解決方案...滾動到底部查看。從Backbone.Marionette中嵌套複合視圖捕獲事件

我遇到了Backbone Marionette的問題，我似乎無法找到解決方案。

我建立了一個嵌套視圖結構顯示手風琴視圖像在Twitter的引導，其由外CompositeView中的（手風琴外），它有ItemView控件設置爲另一個CompositeView中（手風琴組），這反過來又具有其使用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' 
    });

將鼠標懸停在一個手風琴項的組中，在觸發器會導致激發命名鼠標懸停上的最低水平，ItemView控件：鼠標懸停在中間CompositeView中和ItemView控件：ItemView控件：鼠標懸停在外CompositeView中。這些對發生的事情沒有特別的描述，所以我想更改觸發器名稱。對我而言，這看起來很簡單，但我無法正確完成，而且我有這種感覺，我忽略了一些東西。

我想達到的是以下幾點。當最深層嵌套的ItemView中觸發事件時，例如上面所示的'mouseover'，我想讓最外層的CompositeView觸發一個觸發器，例如命名爲組：項目：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); 
      }); 
     } 
    });

來源

2013-08-27 Vanderstaaij

您bascially有2個選項：

觸發「組：項目：mousover」事件在你的代碼，當你聽「itemview：itemview：mouseover」
在您的複合視圖中重命名itemViewEventPrefix（見https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-itemvieweventprefix）：設置中間複合視圖使用「item」，外部複合視圖使用「group」。然後，外部合成視圖應該在鼠標懸停時獲得「group：item：mousover」事件

來源

2013-08-27 09:41:44

啊，謝謝。這第一個選項基本上和我已經發現的一樣。我遇到的問題也是我必須在渲染合成視圖後添加偵聽器。只需在複合視圖中添加「事件」散列就沒有用。 – Vanderstaaij

從Backbone.Marionette中嵌套複合視圖捕獲事件

回答

相關問題