Ember multiple Json request Error al cargar la ruta Object no tiene el método 'addArrayObserver'

Estoy teniendo un problema con mi aplicación de brasas. Soy nuevo e intento hacer algo divertido. Entonces, la idea de esta aplicación es ir a buscar una lista de artistas de un servidor a través de una llamada ajax, y luego, si haces clic en el artista, volverá al servidor y buscará los álbumes a través de otra llamada ajax.

Así que la primera parte está funcionando, en realidad está captando a los artistas a través de la llamada ajax cuando hago clic en "biblioteca de música", pero luego al hacer clic en el artista arroja el siguiente error:

Error de aserción: error al cargar la ruta: TypeError: Object [object Object] no tiene el método 'addArrayObserver'

He leído tantas opciones diferentes, y creo que estoy en el camino correcto porque al imprimir en la consola puedo ver que en realidad está yendo al servidor y buscando los álbumes del artista correcto, pero el error se presenta en el último momento. , por lo tanto, no muestra los álbumes. También pude mostrar los álbumes cuando recargué o escribí la url (no ahora, ya que cambié el código para implementar el modelo posterior)

Entonces, aquí está mi código:

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

¡Realmente agradecería algo de ayuda!

Además, el HTML es el siguiente:

<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
Hola, creo que deberías mirar detenidamente esta sección en tu plantilla: {{# each itemController = 'album'}} <tr> <td> {{{name}}} </td> </tr> {{/ each}} ¡Buena suerte!
agregado el autor DelphiLynx, fuente

2 Respuestas

OK, lo resolví con esta pregunta:

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

En lugar de poner la lógica en el modelo o AfterModel, solo necesitaba configurar el controlador.

Espero que ayude a alguien.

¡Mejor!

0
agregado

Para deshacerse del error, debe modificar la función model de la App.ArtistRoute , para devolver una matriz como App.ArtistController es una Ember.ArrayController . Por ejemplo,

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

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

},
....

O incluso coloque el código de la función afterModel en la función model para recuperar los álbumes de este artista.

Aunque no estoy seguro si realmente quieres que el modelo del contexto de tu artista sean los álbumes, no me parece correcto. Sugeriría hacer el App.ArtistControllerEmber.ObjectController , asignar el modelo a un objeto App.Artist y almacenar los álbumes relacionados con este artista en una propiedad de la clase App.Artist . En ese caso, deberá agregar una propiedad en App.Artist y crear una clase de App.Album .

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
agregado
Gracias por su respuesta, intentaré lo que está diciendo. En cuanto al modelo/afterModel, tenía el código en el modelo anterior, pero como el gancho del modelo no se llama cuando se llama al "linkTo" o "TransisionTo", moví la lógica al afterModel. Intentaré hacer un objectController en lugar de un ArrayController. Yo lo haré saber. ¡Gracias!
agregado el autor esdrayker, fuente
Para mí también tiene más sentido poner toda esta lógica en el Modelo, pero entonces el "LinkTo" es inútil ... bah
agregado el autor esdrayker, fuente
JavaScript - Comunidad española
JavaScript - Comunidad española
4 de los participantes

En este grupo hablamos de JavaScript. Partner: es.switch-case.com