javascript - 在 Ember.js 中表示不同类型的对象数组

Question

我正在使用带有最新 ember-data 和最新 Ember.js (RC5) 的 REST 适配器

我的模型模块具有以下映射:

DS.Model.extend({
    type: DS.attr('string'),
    url: DS.attr('string'),
    text: DS.attr('string'),
    header: DS.attr('string')
});

针对返回 JSON 的 API:

{
    "status": "success",
    "modules": [{
        "id": "123456",
        "type": "video",
        "url": "http://some.where.com/video.mp4"
    }, {
        "id": "123457",
        "type": "text",
        "text": "Lorem ipsum dolor sit amet ..."
    }, {
        "id": "123458",
        "type": "feedback",
        "header": "Indtast noget feedback til os."
    }]
}

• 如您所见，模块具有不同的类型。
• 可以有多个具有相同类型的对象。
• 模块是数组中的对象，因为顺序很重要。

我遇到的问题是如何在模板中表示它们？我需要为每个 View 创建不同的 View ，但是 Handlebars 中没有这样的东西，例如 if type === video then(只有 bool 值，如果这让我担心我正在以错误的方式解决问题)呈现不同的 View :

if type === video
{{view moduleVideo}}

if type === text
{{view moduleText}}

if type === feedback
{{view moduleFeedback}}

如何为不同类型呈现不同的 View ？或者有更多的 Ember.js 方式来设计这样的东西吗？

Answer 1

上面的开关类型结构的类似物是定义模型上的识别属性。

App.Module = DS.Model.extend({

    // ...

    isVideo: function() {
        return this.get('type') === 'video';
    }.property('type'),

    isText: function() {
        return this.get('type') === 'text';
    }.property('text'),

    // ...

});

在您的模板中，您现在有 bool 值:

{{#if isVideo}}
    {{view moduleVideo}}
{{/if}}

{{#if isText}}
    {{view moduleText}}
{{/if}}

这可行，但由于以下两个原因而不受欢迎:

1. 每种类型都需要一个新的计算属性。
2. 您最终会在模板中得到一个巨大的条件列表。

解决这个问题的一种方法可能是制作一个 Handlebars 助手来替换 {{render}}，它使用模型的类型根据命名约定选择合适的 Controller / View /模板。

另一种方法是为您的模型提供一个计算属性来呈现其输出，然后使用三 Handlebars 绑定(bind)将其转储到您的模板中。然后，您可以针对不同的子类以不同的方式覆盖输出属性。这可以很好地与 Ember Data 的多态性配合使用。

编辑:

Here's a jsfiddle of what I was trying to describe above .