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

如何使用变量视图和控制器渲染模型集合？

2 个答案: