Marionette CompositeView作爲itemView自己的itemView（圓形遞歸？）

這裏有一個有趣的。我有兩個CompositeViews，CategoriesView和CategoryView，我有一個嵌套的類別集合，其中每個類別可能有0個或更多子元素。我想呈現該集合，以便任何有子女的類別使用CategoriesView作爲其itemView以及任何沒有使用CategoryView的類別。理想情況下，我希望CategoryView使用CategoriesView作爲其itemView，反之亦然。所以：Marionette CompositeView作爲itemView自己的itemView（圓形遞歸？）

+---------------------------------+ 
| CategoriesView: Title   | <- 4 children 
|---------------------------------| 
| CategoryView: item 1   | <- 0 children 
| CategoryView: item 2   | <- 0 children 
| CategoryView: item 3   | <- 0 children 
| +-----------------------------+ | 
| | CategoriesView: title  | | <- 10 children 
| |-----------------------------| | 
| | CategoryView: item 5  | | 
...

我遇到的問題是，我不能定義CategoryView的itemView財產CategoriesView，因爲這個對象是在腳本文件後面定義。這導致CompositeView使用自己作爲itemView。

var CategoryView = Marionette.CompositeView.extend({ 
    template: catTpl, 
    tagName: 'li', 
    itemView: CategoriesView, 
    itemViewContainer: '.panel-group', 
    initialize: function() { 
     if (this.model.get('children').length) { 
      this.collection = this.model.get('children'); 
     } 
    }, 
    onRender: function() { 
     if (!this.collection) { 
      this.$(".panel-group").remove(); 
     } 
    } 
}); 

var CategoriesView = Marionette.CompositeView.extend({ 
    template: groupTpl, 
    className: "panel panel-default", 
    itemView: CategoryView, 
    itemViewContainer: '.panel-body ul', 
    initialize: function() { 
     this.collection = this.model.get('children'); 
    } 
});

（附註：我使用的是引導的panel和collapse，從而使得各類別組作爲自己的面板）

眼下，它呈現的頂級類別的面板，和一切的下方爲名單。

有沒有更好的方法來處理這種嵌套的視圖關係？我相信如果需要的話我可以一起破解一些東西，但我寧願這樣做是「正確」的方式。 :)或者我應該忘記它，並通過省略itemViewCategoryView去嵌套列表路由，因此它使用自己？

來源

2014-02-05 ken.dunnington

我剛剛發現[這篇文章]（http://stackoverflow.com/questions/19127436/marionette-compositeview-renders-itself-for-each-model-in-collection-instead-of#20049509）它回答未定義itemView的問題，並把我放在正確的軌道上。當我完全正常工作時，我會更新一個真實的答案。 –

我最終什麼事做了重寫getItemView函數返回相應的ItemView類：

// Renders a simple list item 
var CategoryView = Marionette.CompositeView.extend({ 
    template: catTpl, 
    tagName: "li" 
}); 

// Renders a Panel with heading and body and container for list items 
var CategoriesView = Marionette.CompositeView.extend({ 
    template: groupTpl, 
    className: "panel panel-default", 
    itemViewContainer: '.panel-body ul', 
    // Reuse this as the itemView if we need to render a sub-list 
    getItemView: function(item) { 
     if (item.get('children').length == 0) { 
      return CategoryView; 
     } else { 
      return this.constructor; 
     } 
    }, 
    initialize: function() { 
     this.collection = this.model.get('children'); 
    } 
}); 

// Renders the outermost container 
return Marionette.CompositeView.extend({ 
    template: mainTpl, 
    className: "carousel slide", 
    attributes: { 
     "data-interval": false, 
     "data-wrap": false 
    }, 
    itemView: CategoriesView, 
    itemViewContainer: '#categories' 
});

這個作品真的很好，讓我有幾分更復雜的佈局，它不太適合CompositeViews開箱即用的傳統樹/葉模式。

來源

2014-02-06 21:30:10

這應該工作：

var CategoryView = Marionette.CompositeView.extend({ 
    // don't define the itemView here... 
}); 

var CategoriesView = Marionette.CompositeView.extend({ 
    // edited for brevity 
    itemView: CategoryView, 
    // edited for brevity 
}); 

CategoryView.itemView = CategoriesView

來源

2014-02-06 07:22:14

謝謝！這肯定會照顧我遇到的一個問題（將itemView分配給稍後在文件中定義的類），但並不完全是我需要發生的事情。請參閱下面的答案。 –

Marionette CompositeView作爲itemView自己的itemView（圓形遞歸？）

回答

相關問題