Javascript 加载路由对象没有方法时出现Ember多个Json请求错误'；addArrayObserver'；

我的余烬应用程序有问题。我是新来的，我想做些有趣的事情。因此，这个应用程序的想法是通过ajax调用从服务器获取艺术家列表，然后如果单击艺术家，它将再次转到服务器并通过另一个ajax调用获取相册

因此，第一部分工作正常，当我单击“music library”时，它实际上是通过ajax调用获取艺术家，但是当单击艺术家时，它抛出以下错误：

断言失败：加载路由时出错：类型错误：对象[Object Object]没有方法“addArrayObserver”

我读过很多不同的选项，我认为我的思路是正确的，因为通过在控制台上打印，我可以看到它实际上是进入服务器并获取正确的艺术家的相册，但错误是在最后一刻抛出的，因此它没有显示相册。我还能够在重新加载或键入url时显示相册（现在不行，因为我更改了代码以实现afterModel）

这是我的代码：

App = Ember.Application.create({
LOG_TRANSITIONS: true,
LOG_TRANSITIONS_INTERNAL: true
});

App.Library = Ember.Object.extend({
name: null,
artist: []
});

App.Library.reopenClass({
loadArtist: function() {
        var artistList = Em.A();
        $.getJSON('url').then(function(data){

            //json parsing, creating a library object and putting it into the array         

        });
        return artistList;
}   
});

App.Artist = Ember.Object.extend({
id: null,
name: null,
coverArt: null,
albumCount: null
});

App.Albums = Ember.Object.extend({
albums: []
});

App.Artist.reopenClass({
loadAlbums: function(params) {
    var albumsJson = 'url' + params.artist_id +'';
    var albumList = Em.A();
    $.getJSON(albumsJson).then(function(data){

    //parsing json, creating artist objects and pushing them into the array

            }); 
    return albumList;
    //});
}

});


/*****************************ROUTER**************************************************************************************/

App.Router.map(function() {
  // put your routes here
this.resource('library', function() {
    this.resource('artist', { path: '/:artist_id'});  
    });


});


App.IndexRoute = Ember.Route.extend({
model: function() {
    var hi = ['Welcome'];
    return hi;
}
});

App.LibraryRoute = Ember.Route.extend({
model: function() {

    return App.Library.loadArtist();
}
});

App.ArtistRoute = Ember.Route.extend({
model: function(params) {

    this.transitionTo('artist', params);

},

afterModel: function(params, transition){

    var artist = Em.A();
    if(params.artist_id==null){
        artist.push(App.Artist.create({artist_id: params.id}));
    } else {
        artist.push(App.Artist.create({artist_id: params.artist_id}));
    }

    return App.Artist.loadAlbums(artist[0]);
}
});


/**************************************CONTROLLERS***********************************************************************************/

App.ArtistController = Ember.ArrayController.extend({
needs: "library"
});

App.LibraryController = Ember.ArrayController.extend({});

我真的非常感谢你的帮助

此外，HTML如下所示：

<script type="text/x-handlebars">
    <div class="navbar navbar-default">
        <div class="navbar-inner">
            <a class="navbar-brand" href="#">My Library</a>
            <ul class="nav navbar-nav">
                <li>{{#linkTo 'index'}}Home{{/linkTo}}</li>
                <li>{{#linkTo 'library'}}Music Library{{/linkTo}}</li>
            </ul>
        </div>
    </div>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
    <div class="container">
            {{#each item in model}}
            <h1>{{item}}</h1>
            {{/each}}
    </div>
</script>
<script type="text/x-handlebars" data-template-name="library">
<div class="container"> 
    <div class="row">
        <div class="col-md-4">
            <table class="table">
                {{#each model}}
                    <tr><td>
                        {{name}}
                    </td></tr>
                        {{#each artist}}
                        <tr><td>
                            {{#linkTo 'artist' this}}
                                {{name}}
                            {{/linkTo}}
                            <!--<a {{action 'selectArtist' this}}> {{name}} </a>-->
                        </td></tr>
                        {{/each}}
                {{/each}}       
            </table>
        </div>
        <div class="col-md-8">
            <p>Albumes</p>
            {{outlet}}
        </div>
    </div>
</div>
</script>

<script type="text/x-handlebars" data-template-name="artist">
<div class="container"> 
    <div class="col-md-4">
        <table class="table">
            <tr><td><p>{{controllers.library.artist.name}}</p></td></tr>
            {{#each itemController='album'}}
                <tr><td>
                    {{{name}}}
                </td></tr>
            {{/each}}       
        </table>
    </div>  
</div>
</script>

{{{#链接到'index'}主页{{/linkTo}
{{{链接到“图书馆”}音乐图书馆{{/linkTo}

{{outlet}}
{{{#模型中的每个项目}
{{item}}
{{/每个}}
{{{#每个模型}
{{name}}
{{{每位艺术家}
{{{#链接到“艺术家”这个}
{{name}}
{{/linkTo}
{{/每个}}
{{/每个}}
相册

{{outlet}}
{{controllers.library.artist.name}

{{{#每个itemController='album'}
{{{name}}}
{{/每个}}

---

非常感谢

要消除错误，您需要修改

App.ArtistRoute

的

模型

函数，以

App.ArtistController

的形式返回数组。ArtistController是

Ember.ArrayController

。 比如说,

App.ArtistRoute = Ember.Route.extend({
model: function(params) {

    //this.transitionTo('artist', params);
  return [];

},
....

甚至可以将

afterModel

函数的代码放入

model

函数中，以检索这位艺术家的专辑

虽然我不确定你是否真的希望你的艺术家背景模型成为专辑，但我觉得它并不正确。我建议将

App.ArtistController

aν

Ember.ObjectController

，将模型分配给

App.Artist

对象，并将与此艺术家相关的相册存储在

App.Artist

类的属性中。在这种情况下，您需要在

App.Artist

中添加一个属性，并创建一个

App.Album

类

考虑到这一点，请看下面的示例，该示例对您的代码进行了非常粗略的修改（注意，App.ArtistController没有被切换，而是它的模型是一组相册），

---

好的，我用这个问题解决了它：

我只需要设置控制器，而不是将逻辑放在模型或后模型中

希望这对某人有帮助

---

最好的

您好，我认为您应该仔细查看模板中的这一部分：

{{{{each itemController='album'}}{{{name}}}{{/each}

祝您好运！谢谢你的回复，我会试试你说的。至于model/afterModel，我以前在模型中有代码，但是由于在调用“linkTo”或“transitionto”时没有调用模型挂钩，所以我将逻辑移到了afterModel。我将尝试制作objectController而不是ArrayController。我会让你知道的。谢谢对我来说，将所有这些逻辑放在模型中也更有意义，但是“LinkTo”是usless。。。呸