Comment attendre pour rendre la vue dans backbone.js jusqu'à ce que la récupération soit terminée?

Question

J'essaie de comprendre le fonctionnement d'une partie de backbone.js. Je dois aller chercher une collection de modèles une fois l'application lancée. Je dois attendre que la récupération soit terminée pour rendre chaque vue. Je ne suis pas sûr à 100% de la meilleure approche à adopter dans ce cas.

 var AppRouter = Backbone.Router.extend({
    routes: {
        "": "home",
        "customer/:id": "customer" 
    },

    home: function () {
        console.log("Home");
    },

    customer: function (id) {
        if (this.custromers == null)
            this.init();

        var customer = this.customers.at(2); //This is undefined until fetch is complete. Log always says undefined.
        console.log(customer);
    },

    init: function () {
        console.log("init");
        this.customers = new CustomerCollection();
        this.customers.fetch({
            success: function () {
                console.log("success"); 
                // I need to be able to render view on success.
            }
        });
        console.log(this.customers);
    }
});    
 

Answer 1

La méthode que j'utilise est le rappel complet jQuery comme ceci:

 var self = this;
this.model.fetch().done(function(){
  self.render();
});
 

Cela était recommandé dans un rapport de bogue Backbone. Bien que le rapport de bogue recommande d'utiliser complete , cette méthode de rappel a depuis été déconseillée 2 au profit de done .

Answer 2

Vous pouvez également le faire avec jquery 1.5+

 $.when(something1.fetch(), something2.fetch()...all your fetches).then(function() {
   initialize your views here
});
 

Answer 3

J'ai écrit quelques articles sur ce récemment. Ils devraient vous aider:

• Pour Obtenir Un Modèle À Partir D'Un Backbone De Collecte, Sans Savoir Si La Collection Est Chargé
• La réécriture de Mon " la Garantie des Rappels de Code Avec jQuery Différé

et si elle est liée à vue, celui-ci peut vous aider à comprendre à partir d'un autre point de vue:

• De façon asynchrone Charge des Modèles HTML Pour la colonne vertébrale Vues

Answer 4

Vous pouvez envoyer vos propres options.succès pour les collections de la méthode de récupération, qui ne fonctionne que lorsque l'extraction est terminée

---

MODIFIER

(super en retard!)

À partir de l'épine dorsale de la source (la ligne de départ 624 dans 0.9.1)

fetch: function(options) {
  options = options ? _.clone(options) : {};
  if (options.parse === undefined) options.parse = true;
  var collection = this;
  var success = options.success;
  options.success = function(resp, status, xhr) {
    collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options);
    if (success) success(collection, resp);
  };

Note de la deuxième à la dernière ligne. Si vous avez passé dans une fonction dans l' options objet que l' success clé, il va appeler après la collection a été analysée dans les modèles et ajoutés à la collection.

Donc, si vous n':

this.collection.fetch({success: this.do_something});

(en supposant que l' initialize méthode est contraignante this.do_something de this...), il va appeler la méthode APRÈS tout le toutim, vous permettant de déclencher des actions de se produire immédiatement après extraction/parse/attach

Answer 5

Un autre moyen utile peut-être de bootstrap dans les données directement au chargement de la page. Si à partir de la
FAQ:

Chargement De Bootstrap Modèles

Lorsque votre application se charge tout d'abord, il est courant d'avoir un ensemble de modèles initiaux que vous savez que vous allez avoir besoin, afin de rendre la page. Au lieu de déclencher un extra requête AJAX pour récupérer, un beau modèle à avoir leurs données déjà amorcé dans la page. Vous pouvez ensuite utiliser reset pour remplir vos collections avec les données initiales. Au DocumentCloud, dans le ERB modèle pour l'espace de travail, nous faisons quelque chose le long de ces lignes:

<script>
  var Accounts = new Backbone.Collection;
  Accounts.reset(<%= @accounts.to_json %>);
  var Projects = new Backbone.Collection;
  Projects.reset(<%= @projects.to_json(:collaborators => true) %>);
</script>