modèles dans la collection de disparition Backbone
-
22-10-2019 - |
Question
J'ai un modèle de réseau fédérateur line
qui contient une collection du modèle Stop
.
À un moment donné, je veux itérer à travers les arrêts de la ligne et obtenir le temps de Voyage au total le long de la ligne, en utilisant la fonction Souligné reduce
.
Cela ne fonctionne pas, cependant. Il semble que quelque chose se passe avec la collection à un moment donné. Il semble contenir qu'un seul objet sans attributs significatifs, même si je sais pertinemment qu'il a été peuplé avec quatre arrêts-modèles avec des attributs valides.
Le modèle:
App.models.Line = Backbone.Model.extend({
initialize: function() {
var stops = new App.models.Stops({
model: App.models.Stop,
id: this.get("id")
});
stops.fetch();
this.set({
stops: stops
});
this.set({unique: true});
this.calculateTotalTime();
},
calculateTotalTime: function() {
this.get("stops").each(function(num) {
console.log("Model!");
});
console.log("Unique: ", this.get("unique"));
}
});
Console impression est:
Model!
Unique: true
Il devrait y avoir quatre « Modèle », puisque le nombre de modèles est quatre.
Le plus étrange est que tout fonctionne très bien dans la console:
window.line.get("stops").each(function(num) {
console.log("Model!");
});
Model!
Model!
Model!
Model!
Le JS est compilé avec Pignons:
//= require ./init
//= require ./lib/jquery
//= require ./lib/underscore
//= require ./lib/backbone
//= require ./lib/raphael
//= require_tree ./controllers
//= require_tree ./models
//= require_tree ./views
//= require ./main
init.js:
window.App = {};
App.views = [];
App.models = [];
main.js:
$(function() {
window.line = new App.models.Line({name: "4", id: 4});
window.lineView = new App.views.Line({model: line});
$("#outer").append(lineView.render().el);
});
Une autre comportement étrange:
console.log(this.get("stops"))
dans le modèle donne cet objet assez normal:
child
_byCid: Object
_byId: Object
_onModelEvent: function () { [native code] }
_removeReference: function () { [native code] }
id: 4
length: 4
models: Array[4]
0: Backbone.Model
1: Backbone.Model
2: Backbone.Model
3: Backbone.Model
length: 4
__proto__: Array[0]
__proto__: ctor
Mais l'appel console.log(this.get("stops").models)
, ce qui devrait donner le tableau, ne retourne que cela, un tableau d'un objet unique sans attributs utiles:
[
Backbone.Model
_callbacks: Object
_changed: false
_changing: false
_escapedAttributes: Object
_previousAttributes: Object
attributes: Object
id: 4
model: function (){ return parent.apply(this, arguments); }
__proto__: Object
cid: "c1"
id: 4
__proto__: Object
]
Je soupçonne que cela est tout le long d'un malentendu sur la nature de this
. Heureux de toute aide fournie.
La solution
stops.fetch()
est un processus asynchrone, de sorte que le code que vous avez écrit juste après le feu sera probablement avant que les résultats de la récupération sont revenus du serveur.
vous devez modifier votre code pour exécuter tout après l'opération d'extraction revient. la meilleure façon de le faire est avec l'événement reset
de la collection stops
:
App.models.Line = Backbone.Model.extend({
initialize: function() {
var stops = new App.models.Stops({
model: App.models.Stop,
id: this.get("id")
});
// store the stops, and then bind to the event
this.set({stops: stops});
stops.bind("reset", this.stopsLoaded, this);
stops.fetch();
},
stopsLoaded: function(){
// get the stops, now that the collection has been populated
var stops = this.get("stops");
this.set({unique: true});
this.calculateTotalTime();
},
calculateTotalTime: function() {
this.get("stops").each(function(num) {
console.log("Model!");
});
console.log("Unique: ", this.get("unique"));
}
});
la raison pour laquelle cela fonctionne dans votre console est car au moment où vous tapez le code pour évaluer les arrêts du modèle, l'appel fetch
est déjà retourné et rempli la collection.
espoir qui aide