这是一个类似的问题，显示了两种方法：多个模型的对象的集合作为Ember中模板中的可迭代内容。 JS

根据属性或其类型呈现项目

我知道有两种方法：

1. 向每个对象添加布尔属性，并使用句柄 {{＃if}} 来检查该属性并提供正确的视图


2. 扩展 Ember.View ，并使用计算属性根据哪种类型的对象来切换渲染哪个模板正在呈现（基于按模型类型选择视图模板/对象值使用Ember.js ）

方法1

JS：

  App.Post = Ember.Object.extend（{
 isPost：true 
 }）; 

 App.Bookmark = Ember.Object.extend（{
 isBookmark：true 
}）; 

 App.Photo = Ember.Object.extend（{
 isPhoto：true 
}）; 
 

模板：

 code>< UL> 
 {{#each item in controller.stream}} 
 {{#if item.isPost}} 
< li> post：{{item.name}} {{item.publishtime }}&LT; /锂&GT; 
 {{/ if}} 
 {{#if item.isBookmark}} 
< li>书签：{{item.name}} {{item.publishtime}}< /李&GT; 
 {{/ if}} 
 {{#if item.isPhoto}} 
< li>照片：{{item.name}} {{item.publishtime}}< /李&GT; 
 {{/ if}} 
 {{/ each}} 
< / ul> 

方法2

JS： p>

  App.StreamItemView = Ember.View.extend（{
 tagName：li，
 templateName：function （）{
 var content = this.get（'content'）; 
 if（content instanceof App.Post）{
 returnStreamItemPost; 
} else if （App.Photo的实例）{
返回StreamItemBookmark; 
} else if（content instanceof App.Photo）{
返回StreamItemPhoto; 
} 
}。 property（），

 _templateChanged：function（）{
 this.rerender（）; 
} .observes（'templateName'）
}）
 

模板：

 < UL> 
 {{#each item in controller.streamSorted}} 
 {{view App.StreamItemView contentBinding = item}} 
 {{/ each}} 
< / ul> 
 

JSBin示例 - 未排序的列表使用方法1呈现，排序列表使用方法2呈现

I have a list of items I'm trying to display with Ember. For each of these items, I'd like to be able to dynamically select the view type to use to display it based on a "message_type" field in each model.

I currently have something like this, which totally sucks and is not scalable:

{{#each message in controller}}

  {{#if message.isImage}}
    {{view App.ImageMessageView}}
  {{/if}}

  .... 

  {{#if message.isVideo}}
    {{view App.VideoMessageView}}
  {{/if}}

{{/each}}

How can you dynamically select a view based on a model's field in Ember?

Here is a similar question that showed 2 ways to do this: Collection of objects of multiple models as the iterable content in a template in Ember.js

rendering items based on a property or their type

I know of two ways to do this:

1. add a boolean property to each object and use a handlebars {{#if}} to check that property and render the correct view
2. extend Ember.View and use a computed property to switch which template is rendered based on which type of object is being rendered (based on Select view template by model type/object value using Ember.js)

Method 1

JS:

App.Post = Ember.Object.extend({
  isPost: true
});

App.Bookmark = Ember.Object.extend({
  isBookmark: true
});

App.Photo = Ember.Object.extend({
  isPhoto: true
});

template:

<ul>
  {{#each item in controller.stream}}
      {{#if item.isPost}}
        <li>post: {{item.name}} {{item.publishtime}}</li>
      {{/if}}
      {{#if item.isBookmark}}
        <li>bookmark: {{item.name}} {{item.publishtime}}</li>
      {{/if}}
      {{#if item.isPhoto}}
        <li>photo: {{item.name}} {{item.publishtime}}</li>
      {{/if}}
  {{/each}}
   </ul>

Method 2

JS:

App.StreamItemView = Ember.View.extend({
  tagName: "li",
  templateName: function() {
    var content = this.get('content');
    if (content instanceof App.Post) {
      return "StreamItemPost";
    } else if (content instanceof App.Bookmark) {
      return "StreamItemBookmark";
    } else if (content instanceof App.Photo) {
      return "StreamItemPhoto";
    }
  }.property(),

  _templateChanged: function() {
        this.rerender();
    }.observes('templateName')
})

template:

<ul>
{{#each item in controller.streamSorted}}
    {{view App.StreamItemView contentBinding=item}}
{{/each}}
 </ul>

JSBin example - the unsorted list is rendered with method 1, and the sorted list is rendered with method 2