使用Ember.js按模型types/对象值select视图模板
我想将不同的对象存储在相同的控制器内容数组中,并使用适当的视图模板呈现每个对象,但理想情况下是相同的视图。
我正在使用下面的代码输出列表对象。 他们目前是相同的,但我希望能够使用不同的。
<script type="text/x-handlebars"> {{#each App.simpleRowController}} {{view App.SimpleRowView class="simple-row" contentBinding="this"}} {{/each}} </script>
下面是该视图的简化版本。 我没有包括的其他function可以用于任何对象,而不pipe模型。 所以我最好有一个观点(尽pipe我已经阅读了一些有关mixin的文章,如果不能的话可以提供帮助)。
<script> App.SimpleRowView = Em.View.extend({ templateName: 'simple-row-preview', }); </script>
我的第一个testing是允许不同的对象types在“简单的行预览”中结束了大量的条件 – 它看起来很糟糕!
是否有任何dynamic控制迭代我的内容数组时使用的templateName或视图的方式?
UPDATE
非常感谢两位受访者。 在视图中使用的最终代码如下。 我的一些模型是相似的,我喜欢在应用程序中能够在模板(或某种“状态”)之间切换的想法。
<script> App.SimpleRowView = Em.View.extend({ templateName: function() { return Em.getPath(this, 'content.template'); }.property('content.template').cacheable(), _templateChanged: function() { this.rerender(); }.observes('templateName'), // etc. }); </script>
您可以将templateName作为属性,然后根据内容计算出要使用的模板。
例如,这使用instanceof根据对象的types设置模板:
App.ItemView = Ember.View.extend({ templateName: function() { if (this.get("content") instanceof App.Foo) { return "foo-item"; } else { return "bar-item"; } }.property().cacheable() });
这里有一个上面的工作示例小提琴: http : //jsfiddle.net/rlivsey/QWR6V/
基于@rlivsey的解决scheme,我添加了在属性更改时更改模板的function,请参阅http://jsfiddle.net/pangratz666/ux7Qa/
App.ItemView = Ember.View.extend({ templateName: function() { var name = Ember.getPath(this, 'content.name'); return (name.indexOf('foo') !== -1) ? 'foo-item' : 'bar-item'; }.property('content.name').cacheable(), _templateChanged: function() { this.rerender(); }.observes('templateName') });
- 如何处理Ember.js中的“无路由匹配”并显示404页面?
- meteor,Ember.js和Backbone.js之间的主要区别是什么?
- 视图与Ember.js中的组件
- Bootstrap,Angular.js和Ember.js中使用的数据属性选项是否与Unobtrusive Javascript原则相冲突?
- 检查一个等于Ember Handlebar中的值如果是帮助者
- Sproutcore和Ember的区别
- Angular.js Backbone.js还是有更好的performance
- 通过ember-cli创build的应用程序获取“未捕获的错误:断言失败:Ember Views需要1.7和2.1之间的jQuery”
- 检查Ember.js:获取对象的types(Class)?