我在我的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;
}
这感觉不必要的复杂,我不喜欢我必须手动连接视图与控制器。有更清洁的方式吗?
答案 0 :(得分:0)
我会使用{{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}}
如果不知道您想要更详细地完成什么,很难说出最佳解决方案是什么。
答案 1 :(得分:0)
您可以创建一个组件,该组件将充当控制器并具有与之关联的视图:
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>