Backbone.js non preleva attributi reali

Ho un modello base di backbone, il suo attributo urlRoot è impostato e il target corrispondente sul lato server restituisce un output JSON corretto (sia la stringa application/json intestazione application/json ).

Chiamo un recupero come questo:

 var athlete = new Athlete({ id: 1 }); athlete.fetch(); 

a questo punto se aggiungo a

 console.log(athlete); 

Posso vedere il modello e controllarlo in firebug. Posso aprire l’object attributes e vedere tutti i valori restituiti dal server.

MA se faccio un:

 console.log(athlete.get('name')); 

Vengo undefined (il nome appare sotto gli attributi nell’ispezione DOM che ho menzionato sopra)

anche facendo un:

 console.log(athlete.attributes); 

restituisce un object contenente solo {id: 1} che è l’argomento che ho passato durante la creazione del modello.

Se creo il modello in questo modo:

 var athlete = new Athlete(); 

allora tutto funziona bene, il metodo .get() restituisce tutto ciò che chiedo e athlete.attributes mostra tutti i valori.

Che cosa sto facendo di sbagliato?

fetch è asincrono, il che significa che i dati non saranno disponibili se si chiama immediatamente console.log(athlete.get('name')) dopo il recupero.

Usa gli eventi per ricevere una notifica quando i dati sono disponibili, per esempio

 var athlete = new Athlete({id: 1}); athlete.on("change", function (model) { console.log(model.get('name')); }); athlete.fetch(); 

o aggiungi una richiamata al tuo recupero

 var athlete = new Athlete({ id: 1 }); athlete.fetch({ success: function (model) { console.log(model.get('name')); } }); 

o sfruttare la promise restituita da fetch :

 athlete.fetch().then(function () { console.log(athlete.get('name')); }); 

Proprio come una rapida osservazione quando si usano eventi in questo esempio. Non ha funzionato con il change nel mio caso perché questo evento si triggers ogni cambiamento. Quindi la sync fa il trucco.

 var athlete = new Athlete({id: 1}); athlete.on("sync", function (model) { console.log(model.get('name')); }); athlete.fetch();