在Ember.js中表示具有不同類型的對象數組

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

• 如您所見，模塊具有不同的類型。
• 可以有許多具有相同類型的對象。
• 模塊是數組中的對象，因為順序很重要。

我遇到的問題是如何在模板中表示它們？ 我需要為每個視圖創建不同的視圖，但是在車把中沒有這樣的東西，例如if type === video then （僅布爾值，如果這讓我擔心我想用錯誤的方式解決問題）會渲染不同的視圖視圖：

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

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

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

如何為不同類型呈現不同的視圖？ 還是有更多的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}}

這可行，但是由於兩個原因是不希望的：

1. 每種類型都需要一個新的計算屬性。
2. 最終，模板中會包含大量條件語句。

解決此問題的一種方法可能是使Handlebars幫助器替換{{render}} ，后者使用模型的類型根據命名約定選擇合適的控制器/視圖/模板。

一種替代方法是為模型提供一個計算后的屬性，以呈現其輸出，然后使用三重車把綁定將其轉儲到模板中。 然后，您可以為不同的子類以不同的方式覆蓋output屬性。 這將與Ember Data的多態性很好地配合。

編輯：

這是我上面試圖描述的內容 。