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

时间:2015-07-22 21:56:58

标签: javascript json ember.js ember-data ember-cli

我正在使用soundCloud json播放用户收藏的歌曲。

这是json文件

enter image description here

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

这是我的模特函数

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;
},

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

enter image description here enter image description here enter image description here

然后在我的模板中有我的问题,我可以显示所有喜欢的属性(标题和流派),但不是我的 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')

enter image description here

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

1 个答案:

答案 0 :(得分:1)

首先关闭user并非在范围内的任何位置。您的模型钩子只返回favorites的列表。

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

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;
},

第三,你的承诺很有可能无法解决,因为其中一条代码路径无法解决,你的ui将永远等待。

您需要修改从模型挂钩返回的内容,包括用户和收藏夹,或者沿着这些行添加的内容。我不确定您的数据模型是什么样子的,所以我只是将其直接添加到收藏夹中,然后根据需要进行修复。我也不知道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>