Question

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

我目前有类似的东西，完全糟透了，不可扩展：

{{#each message in controller}}

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

  .... 

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

{{/each}}

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

Answer 1

以下是一个类似的问题，显示了两种方法：Collection of objects of multiple models as the iterable content in a template in Ember.js

根据属性或类型呈现项目

我知道有两种方法可以做到这一点：

为每个对象添加一个布尔属性，并使用把手{{#if}}检查该属性并呈现正确的视图
扩展Ember.View并使用计算属性根据呈现的对象类型切换呈现的模板（基于Select view template by model type/object value using 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
});

模板：

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

方法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')
})

模板：

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

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

Answer 2

这可能需要更多的思考，但这是我快速提出的：

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

根据型号选择视图类型

2 个答案:

根据属性或类型呈现项目

方法1

方法2