Ember mehrere Json Anfrage Fehler beim Laden der Route Objekt hat keine Methode 'addArrayObserver'

Ich habe ein Problem mit meiner Glut App. Ich bin neu und versuche, etwas Spaß zu machen. Die Idee dieser App ist also, eine Liste von Künstlern von einem Server über einen Ajax-Aufruf zu holen, und wenn du dann auf den Künstler klickst, wird er erneut zum Server gehen und die Alben über einen anderen Ajax-Anruf holen.

Also der erste Teil funktioniert, er holt die Künstler tatsächlich durch den Ajax-Aufruf, wenn ich auf "Musikbibliothek" klicke, aber dann, wenn ich auf den Künstler klicke, wird der folgende Fehler ausgegeben:

Assertion failed: Fehler beim Laden der Route: TypeError: Objekt [Objekt Objekt] hat keine Methode 'addArrayObserver'

Ich habe so viele verschiedene Optionen gelesen, und ich denke, ich bin auf dem richtigen Weg, denn durch Drucken auf der Konsole kann ich sehen, dass es tatsächlich zum Server geht und die richtigen Künstleralben holt, aber der Fehler wird im letzten Moment geworfen Daher werden die Alben nicht angezeigt. Ich war auch in der Lage, die Alben beim erneuten Laden oder Tippen der URL anzuzeigen (nicht jetzt, da ich den Code geändert habe, um das afterModel zu implementieren)

Also, hier ist mein Code:

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({});

Ich würde wirklich etwas Hilfe schätzen!

Außerdem ist das HTML wie folgt:

<script type="text/x-handlebars">
    <div class="navbar navbar-default">
        <div class="navbar-inner">
            My Library
            
        </div>
    </div>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
    <div class="container">
            {{#each item in model}}
            

{{item}}

            {{/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}}
                            <!-- {{name}} -->
                        </td></tr>
                        {{/each}}
                {{/each}}       
            </table>
        </div>
        <div class="col-md-8">
            
Albumes {{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>
{{controllers.library.artist.name}}</td></tr> {{#each itemController='album'}} <tr><td> {{{name}}} </td></tr> {{/each}} </table> </div> </div> </script>

Thanks a lot!!

0
Hi, ich denke, du solltest diesen Abschnitt in deiner Vorlage genau betrachten: {{# jedes itemController = 'album'}} <tr> <td> {{{name}}} </td> </tr> {{/ each}} Viel Glück!
hinzugefügt der Autor DelphiLynx, Quelle

2 Antworten

OK, ich habe es mit dieser Frage gelöst:

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

Anstatt die Logik in das Modell oder afterModel zu setzen, musste ich nur den Controller einstellen.

Hoffe es hilft jemandem.

Beste!

0
hinzugefügt

Um loszuwerden des Fehlers müssen Sie den Modell Funktion des App.ArtistRoute , modifizieren, ein Array als zurück App.ArtistController ist ein Ember.ArrayController . Beispielsweise,

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

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

},
....

Oder platzieren Sie den Code der Funktion afterModel in der Funktion model , um die Alben dieses Künstlers abzurufen.

Obwohl ich nicht sicher bin, ob du wirklich das Modell deines Künstlerkontextes als Album haben willst, sieht es für mich nicht korrekt aus. Ich würde vorschlagen, den App.ArtistController av Ember.ObjectController zu erstellen, das Modell einem App.Artist -Objekt zuzuweisen und die zugehörigen Alben zu speichern Dieser Künstler in einer Eigenschaft der Klasse App.Artist . In diesem Fall müssen Sie eine Eigenschaft in App.Artist hinzufügen und eine Klasse von App.Album erstellen.

With this in mind have a look at the following example which is a very rough modification of your code (caution the App.ArtistController has not been switched instead its model is an array of albums), http://emberjs.jsbin.com/AdOfiyiN/2#/library/2

0
hinzugefügt
Danke für deine Antwort, ich werde versuchen, was du sagst. Soweit das Model/afterModel, ich hatte den Code im Modell zuvor, aber da der Modell-Hook nicht aufgerufen wird, wenn der "linkTo" oder "TransisionTo" aufgerufen wird, habe ich die Logik in das afterModel verschoben. Ich werde versuchen, einen objectController anstelle eines ArrayController zu machen. Ich lasse es dich wissen. Vielen Dank!
hinzugefügt der Autor esdrayker, Quelle
Für mich ist es auch sinnvoller, all diese Logik in das Modell zu bringen, aber dann ist das "LinkTo" nichts los ... bah
hinzugefügt der Autor esdrayker, Quelle
JavaScript - Deutsche Gemeinschaft
JavaScript - Deutsche Gemeinschaft
3 der Teilnehmer

In dieser Gruppe sprechen wir über JavaScript.