rest - EmberJS 处理从 REST Api 返回的复杂对象

Question

我从 REST Api 返回了以下 user 对象:

{
    user: {
        id: 3451,
        name: "First Last",
        favorites: {
            designs: {
                name: "Design 1",
                url: "Url 1"
            },
            typo: {
                name: "Typo 1",
                url: "Url 2"
            },
            games: {
                name: "Game 1",
                url: "Url 3"
            }
        }
    }
}

我从 url /users/3451 得到了这个响应。

这是我的用户模型:

App.User = DS.Model.extend({
    name: DS.attr('string'),
    favorites: DS.attr(), // ??? What to put here?
});

我在显示 {{name}} 时没有问题。但是在收藏夹里，我不知道。我尝试使用 {{#each}}

{{#each favorites}}
    {{@key}} - {{name}}
{{/each}}

但运气不好。它抛出一个错误:错误:断言失败:#each 循环的值必须是一个数组。你传递了 [object Object]

在 EmberJS 中处理这些复杂对象的正确方法是什么？请帮忙。

Answer 1

我认为这个错误很容易解释:你需要循环一个数组，而不是一个对象。以下是我如何将该对象转换为数组，同时保存 key (将其放入您的模型中):

favoritesArray: function() {
    var favorites = this.get('favorites');
    return Em.keys(favorites).map(function(key) {
        return {
            key: key,
            data: favorites[key]
        };
    });
}.property('favorites.@each.{name,url}')

然后，在您的模板中:

{{#each favoritesArray}}
    {{key}} - {{data.name}}
{{/each}}

这将是最简单的方法。但是，如果您正在寻找更好的方法(在我看来)，您可以使用 type transform在(反)序列化时将数据转换为您需要的格式。

编辑:仅作为一些背景信息，我认为 Ember.js 不支持遍历对象的原因是因为无法绑定(bind)到对象键。 Ember.js 知道在触发依赖键观察者时更新绑定(bind)助手，但据我所知，没有办法观察对象的键。使用 Map 或类似的东西可能会实现类似的功能，但我认为它不是内置功能。<​​/p>