使用 Ember.js 按模型类型/对象值选择视图模板答案

【问题标题】：Select view template by model type/object value using Ember.js使用 Ember.js 按模型类型/对象值选择视图模板
【发布时间】：2012-04-17 10:47:14
【问题描述】：

我想将不同的对象存储在同一个控制器内容数组中，并使用适当的视图模板渲染每个对象，但最好是相同的视图。

我正在使用下面的代码输出列表对象。它们目前是相同的，但我希望能够使用不同的。

<script type="text/x-handlebars">
  {{#each App.simpleRowController}}
    {{view App.SimpleRowView class="simple-row" contentBinding="this"}}
  {{/each}}
</script>

视图的简化版本如下。我没有包含的其他功能可以用于任何对象，无论模型如何。所以我最好有一个观点（尽管我已经阅读了一些关于 mixin 的文章，如果没有的话可能会有所帮助）。

<script>
  App.SimpleRowView = Em.View.extend({
    templateName: 'simple-row-preview',
  });
</script>

我最初的几次允许不同对象类型的测试以“simple-row-preview”中的大量条件结束 - 看起来很糟糕！

是否有任何方法可以动态控制迭代内容数组时使用的模板名称或视图？

更新

非常感谢两位受访者。视图中使用的最终代码如下。我的一些模型是相似的，我喜欢能够在我的应用程序中切换模板（或某种“状态”）的想法。

<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>

【问题讨论】：

标签： javascript ember.js

【解决方案1】：

您可以将 templateName 设为属性，然后根据内容确定要使用的模板。

例如，这里使用instanceof根据对象的类型设置模板：

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/

【讨论】：

这是一个很好的答案，但不幸的是，在这种情况下，视图不是通过把手助手添加而是作为一个由 ember 自动拾取的类。在这种情况下，您将无法访问content 或controller（在此讨论：stackoverflow.com/questions/15337065/…）。在这种情况下，我的解决方案是使用一种方法观察 controller.content 并通过 this.set('currentView', view) 在此函数中相应地设置视图

【解决方案2】：

基于@rlivsey 的解决方案，我添加了在属性更改时更改模板的功能，请参阅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')
});

【讨论】：

注意：这不再起作用了。视图有时会在被销毁时尝试渲染，从而引发错误。