modèles dans la collection de disparition Backbone

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.

Answer 1

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