javascript - Ember 模型对象已创建但未显示在模板中

Question

我正在为用户最喜欢的歌曲开发 soundCloud json。

这是json文件

我成功访问了收藏夹和用户属性。

这是我的模型函数

model: function(params) {
    var artist, favoriteListProxy, self;
    self = this;
    artist = params.artist;
    this.controllerFor('application').set('artistName', artist);
    favoriteListProxy = Ember.ArrayProxy.create({
        content: []
    });
    return new Ember.RSVP.Promise(function(resolve, reject) {
        return SC.get("/users/" + 'mannaio' + "/favorites", {
            limit: 40
        }, function(favorites) {
            if (favorites.length) {
                favorites.forEach(function(item, index, arr) {
                    var favorite;
                    favorite = self.createFavoritelist(item, favoriteListProxy);
                    return self.createUser(item.user, favorite);
                });
                favorites = favoriteListProxy.get('content');
                return resolve(favorites);
            }
        });
    });
},

createFavoritelist: function(favorite, arr) {
    var record;
    record = this.store.createRecord('favorite', {});
    record.setProperties({
        id: favorite.id,
        title: favorite.title,
        artwork_url: favorite.artwork_url,
        genre: favorite.genre,
    });
    arr.pushObject(record);
    return record;
},

createUser: function(user, arr) {
    var record;
    record = this.store.createRecord('user', {});
    record.setProperties({
        id: user.id,
        username: user.username,
    });
    arr.pushObject(record);
    return record;
},

如您所见，我可以使用属性创建我最喜欢的用户模型，请参阅控制台

然后在我的模板中存在一个问题，我可以显示所有最喜欢的属性(标题和流派)，但不能显示我的user.username

<section class="streaming__favorites">
    {{#each favorite in sortedFavorites}}
            <article class="streaming__favorites__song">
                <span>{{favorite.title}}</span>
                <span>{{favorite.genre}}</span>
                <span>{{user.username}}</span>
            </article>
    {{/each}}
</section>



sortProperties: ['created_at:desc'],
sortedFavorites: Ember.computed.sort('model', 'sortProperties')

我在模板中做了什么，不显示 user.username 模型属性？我的问题是什么？

Answer 1

首先，user 不在范围内的任何地方。您的模型 Hook 仅返回收藏夹列表。

其次，我不确定这个方法是如何工作的，我相信它应该崩溃:

createUser: function(user, arr) {
    var record;
    record = this.store.createRecord('user', {});
    record.setProperties({
        id: user.id,
        username: user.username,
    });
    // arr here is the favorite record, not an array, how is this
    // not crashing?
    arr.pushObject(record);
    return record;
},

第三，你的 promise 很有可能无法解决，因为其中一个代码路径无法解决，你的用户界面将永远陷入等待。

您需要修改从模型 Hook 返回的内容，以包含用户和收藏夹，或类似的内容。我不确定您的数据模型是什么样子，所以我只是将其直接添加到最喜欢的数据模型上，并根据需要修复它。我也不知道 SC.get 是什么，所以我会让它接近您所显示的内容，但看起来它可能有点矫枉过正。

大概是这样的:

model: function(params) {
    var artist, favoriteList, self, ret;
    self = this;
    artist = params.artist;
    ret = [];
    this.controllerFor('application').set('artistName', artist);

    return new Ember.RSVP.Promise(function(resolve, reject) {
        return SC.get("/users/" + 'mannaio' + "/favorites", {
            limit: 40
        }, function(favorites) {
            if (favorites.length) {
                favorites.forEach(function(item, index, arr) {
                    var favorite;
                    favorite = self.createFavoritelist(item);
                    ret.push(favorite);
                    favorite.user = self.createUser(item.user);
                });
            }
            resolve(ret);
        });
    });
},

createFavoritelist: function(favorite) {
    return this.store.createRecord('favorite', {
        id: favorite.id,
        title: favorite.title,
        artwork_url: favorite.artwork_url,
        genre: favorite.genre,
    });
},

createUser: function(user) {
    return this.store.createRecord('user', {
        id: user.id,
        username: user.username,
    });
},

那么你的模板就是这样的

<section class="streaming__favorites">
    {{#each favorite in sortedFavorites}}
            <article class="streaming__favorites__song">
                <span>{{favorite.title}}</span>
                <span>{{favorite.genre}}</span>
                <span>{{favorite.user.username}}</span>
            </article>
    {{/each}}
</section>