根据模型选择视图类型

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

基于属性或其类型呈现项

我知道有两种方法：

1. 为每个对象添加一个布尔属性，并使用handlebars {{#if}}检查该属性并呈现正确视图
2. extend 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}}