如何呈現每個模型集合都具有變量視圖和控制器？

Question

我有我的Ember.js應用程序中的模型集合，我想呈現。問題是我希望能夠爲每個模型指定專門的視圖和控制器。

控制器部分似乎很容易：我只是將數組包裝在ArrayController中並實施itemController方法。視圖部分是它變得棘手的地方。我沒有看到明顯的習慣做法。

我們想出的最佳方式是將ArrayController和CollectionView與覆蓋的createChildView相結合。例如：

createChildView: function(viewClass, attrs) { 
    var viewInstance, 
     widgetType = attrs.content.get('type'); 

    // lookup view, if found, use it, if not, pass empty view 
    var viewDefined = this.container.lookup('view:' + widgetType); 
    var createWidgetType = viewDefined ? widgetType : 'empty'; 

    // create view instance from widgetType name 
    // it causes lookup in controller 
    viewInstance = this._super(createWidgetType, attrs); 
    // if `attrs.content` is controller (item of `ComponentsController`) 
    // set it as controller of newly created view 
    if(attrs.content.get('isController')) { 
     viewInstance.set('controller', attrs.content); 
    } 
    return viewInstance; 
} 

這種感覺不必要的令人費解的，我不喜歡，我必須連接與控制器手動類似的觀點。有更清潔的方法嗎？

Answer 1

我會使用{{render}}幫手。它會爲每個實例創建一個視圖和控制器。

{{#each item in model}} 
    {{render "item" item}} 
{{/each}} 

例子：http://emberjs.jsbin.com/vuwimu/2/edit?html,js,output

渲染幫手指南：http://emberjs.com/guides/templates/rendering-with-helpers/#toc_the-code-render-code-helper

此外：

在你提到你想爲特定的模型類型不同的控制器/視圖類型的評論。這可能就像這樣：

{{#each item in model}} 
    {{#if item.typeX}} 
    {{render "itemX" item}} 
    {{/if}} 
    {{#if item.typeY}} 
    {{render "itemY" item}} 
    {{/if}} 
{{/each}} 

，或者如果你選擇去與組件：

{{#each item in model}} 
    {{#if item.typeX}} 
    {{component-x item=item}} 
    {{/if}} 
    {{#if item.typeY}} 
    {{component-y item=item}} 
    {{/if}} 
{{/each}} 

不知道你想更詳細地完成它很難說什麼是最好的解決方案是。

Answer 2

您可以創建一個組件，將作爲控制器，並具有與之相關的觀點：

App.XItemComponent = Ember.Component.extend({ 
    controllerProperty: '!', 
    tagName: 'li' 
}); 

然後，你可以這樣做：

<script type="text/x-handlebars" data-template-name="index"> 
    <ul> 
    {{#each model }} 
     {{ x-item item=this }} 
    {{/each}} 
    </ul> 
</script> 

http://emberjs.jsbin.com/wehevixolu/1/edit?html,js,output