Question

我正在使用REST适配器和最新的ember-data以及最新的Ember.js（RC5）

我的模型Module包含以下映射：

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."
    }]
}

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

我遇到的问题是如何在模板中表示它们？我需要为每个人创建不同的视图，但是在{{1}这样的句柄中没有这样的东西（只有布尔值，如果让我担心我想以错误的方式解决问题）渲染不同的视图：

type === video then

如何为不同类型呈现不同的视图？或者是否有更多的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'),

    // ...

});

在你的模板中，你现在有了布尔值：

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

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

这样可行，但由于两个原因，这是不可取的：

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

解决此问题的一种方法可能是使Handlebars帮助程序替换使用模型类型的{{render}}，以根据命名约定选择合适的控制器/视图/模板。

另一种方法是为您的模型提供一个计算属性，用于呈现其输出，然后使用三个手柄绑定将其转储到您的模板中。然后，您可以针对不同的子类以不同方式覆盖输出属性。这适用于Ember Data的多态性。

修改

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

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

1 个答案: