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

我从网址/users/3451收到了此回复。

这是我的User模型：

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

显示{{name}}没问题。但在favorites，我不知道。我尝试使用{{#each}}

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

但没有运气。它引发了一个错误：Error: Assertion Failed: The value that #each loops over must be an Array. You passed [object Object]

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

Answer 1

我认为错误是非常自我解释的：你需要循环一个数组，而不是一个对象。以下是我将该对象转换为数组的方法，同时保存密钥（将其放入模型中）：

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不支持迭代对象的原因是因为无法绑定到对象键。当依赖关键观察者被触发时，Ember.js知道更新绑定帮助器，但据我所知，没有办法观察对象的关键字。使用Map或类似的东西可能是这样的，但我不认为它是内置的功能。

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

1 个答案: