Question

我的ember应用程序出了问题。我是新手，并尝试做一些有趣的事情。所以这个应用程序的想法是通过ajax调用从服务器获取艺术家列表，然后如果你点击艺术家，它将再次进入服务器并通过另一个ajax调用获取专辑。

所以第一部分正在工作，实际上是当我点击“音乐库”时通过ajax调用获取艺术家，但是当点击艺术家时它会抛出以下错误：

断言失败：加载路径时出错：TypeError：Object [object Object]没有方法'addArrayObserver'

我已经阅读了很多不同的选项，我认为我在正确的轨道上，因为通过在控制台上打印我可以看到它实际上是去服务器并获取正确的艺术家的专辑，但错误是扔在最后一刻，所以它没有显示专辑。我还能够在重新加载或输入网址时显示相册（不是现在，因为我更改了代码以实现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>

非常感谢!!

Answer 1

要消除修改model的{{1}}函数所需的错误，将App.ArtistRoute作为App.ArtistController返回数组。Ember.ArrayController。例如，

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

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

},
....

甚至可以将afterModel函数的代码放在model函数中以检索此艺术家的相册。

虽然我不确定你是否真的希望你的艺术家背景模型成为专辑，但对我来说这看起来并不正确。我建议制作App.ArtistControlleraνEmber.ObjectController，将模型分配给App.Artist对象，并将与此艺术家相关的相册存储在App.Artist类的属性中。在这种情况下，您需要在App.Artist中添加一个属性并创建一个App.Album类。

考虑到这一点，请看下面的示例，它是对代码进行非常粗略的修改（请注意，App.ArtistController尚未切换，而其模型是一个专辑数组）， http://emberjs.jsbin.com/AdOfiyiN/2#/library/2

Answer 2

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

Why isn't my ember.js route model being called?

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

希望对某人有所帮助。

最佳！

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

2 个答案: