3

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

我目前有这样的东西，它非常糟糕并且不可扩展：

{{#each message in controller}}

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

  .... 

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

{{/each}}

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

4

2 回答 2

7

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

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

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

  1. 为每个对象添加一个布尔属性并使用把手{{#if}}来检查该属性并呈现正确的视图
  2. 扩展Ember.View并使用计算属性根据正在渲染的对象类型切换渲染哪个模板（基于使用 Ember.js 按模型类型/对象值选择视图模板）

方法一

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>

方法二

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 例子——未排序的列表用方法一渲染，排序后的列表用方法二渲染

于 2013-04-23T12:50:58.480 回答
0

它可能需要更多的思考，但这是我很快想到的：

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}}
于 2013-04-23T07:18:00.707 回答