Ember.js 基于模型的视图类型选择

我有一个项目列表，我正试图用余烬显示。对于这些项目中的每一项，我希望能够根据每个模型中的“message_type”字段动态选择用于显示它的视图类型

我现在有这样的东西，非常糟糕，不可扩展：

{{#each message in controller}}

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

  .... 

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

{{/each}}

---

如何根据Ember中的模型字段动态选择视图？

可能需要更多思考，但我很快想到了以下几点：

var get = Ember.get,
    isGlobalPath = Ember.isGlobalPath,
    normalizePath = Ember.Handlebars.normalizePath;

var getProp = function (context, property, options) {
    if (isGlobalPath(property)) {
        return get(property);
    } else {
        var path = normalizePath(context, property, options.data);
        return get(path.root, path.path);
    }
};

Ember.Handlebars.registerHelper('detect', function (definition, instance, options) {
    Ember.assert("You must pass exactly two argument to the detect helper", arguments.length === 3);
    Ember.assert("You must pass a block to the detect helper", options.fn && options.fn !== Handlebars.VM.noop);

    var path = '_detect_' + definition.replace('.', '_').toLowerCase();
    context = (options.contexts && options.contexts[0]) || this;
    definition = getProp(context, definition, options);
    instance = getProp(context, instance, options);
    context.set(path, definition.detectInstance(instance));

    return Ember.Handlebars.helpers.boundIf.call(options.contexts[0], path, options);
});

然后，您可以使用以下帮助器：

{{#detect App.Definition instance}}
    DETECTED
{{else}}
    NOT DETECTED
{{/detect}}

---

下面是一个类似的问题，展示了两种方法：

基于属性或其类型呈现项目 我知道两种方法：

向每个对象添加一个布尔属性，并使用手柄

{{{if}}

检查该属性并呈现正确的视图

扩展

Ember.View

，并使用计算属性根据渲染的对象类型（基于）切换渲染的模板

方法1 JS:

模板：

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

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

模板：

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

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

{{{#controller.streamSorted中的每个项}
{{view App.StreamItemView contentBinding=item}
{{/每个}}

-未排序列表使用方法1呈现，排序列表使用方法2呈现