web-dev-qa-db-fra.com

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

J'essaie de comprendre comment fonctionne une partie de backbone.js. Je dois récupérer une collection de modèles une fois l'application lancée. J'ai besoin d'attendre la fin de la récupération pour afficher 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);
    }
});
javascriptasynchronousbackbone.js
49
Frankie

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

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

Cela a été recommandé dans un backbone rapport de bogue . Bien que le rapport de bogue recommande d'utiliser complete, cette méthode de rappel a depuis été déconseillée en faveur de done.

64
Rovanion

Vous pouvez également le faire avec jquery 1.5+

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

Une autre option consiste à ajouter les éléments suivants à l'intérieur de la méthode d'initialisation de vos collections:

this.listenTo(this.collection, 'change add remove update', this.render);

Cela déclenchera la méthode de rendu chaque fois que l'extraction est terminée et/ou que la collection est mise à jour par programme.

1
IcedDante

Un autre moyen utile pourrait être de bootstrap dans les données directement au chargement de la page.
FAQ :

Chargement de modèles amorcés

Lors du premier chargement de votre application, il est courant de disposer d'un ensemble de modèles initiaux dont vous savez que vous aurez besoin, afin de rendre la page. Au lieu de lancer une demande AJAX supplémentaire pour les récupérer, un modèle plus agréable consiste à avoir leurs données déjà amorcées dans la page. Vous pouvez ensuite utiliser reset pour remplir vos collections avec les données initiales. Chez DocumentCloud , dans le modèle ERB pour l'espace de travail, nous faisons quelque chose comme ceci:

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

Vous pouvez utiliser des méthodes d'activation et de désactivation

si vous voulez ajouter une méthode de déclenchement comme supposez que si vous voulez en cas de succès vous voulez appeler la méthode de rendu, veuillez suivre l'exemple ci-dessous.

    _this.companyList.on("reset", _this.render, _this);
    _this.companyList.fetchCompanyList({firstIndex: 1, maxResult: 10},     _this.options);

dans le modèle js, veuillez utiliser comme

    fetchCompanyList: function(data, options) {
    UIUtils.showWait();
    var collection = this;
    var condition = "firstIndex=" + data.firstIndex + "&maxResult=" + data.maxResult;
    if (notBlank(options)) {
        if (notBlank(options.status)) {
            condition += "&status=" + options.status;
        }
    }
    $.ajax({
        url: "webservices/company/list?" + condition,
        type: 'GET',
        dataType: 'json',
        success: function(objModel, response) {
            UIUtils.hideWait();
            collection.reset(objModel);
            if (notBlank(options) && notBlank(options.triggerEvent)) {
                _this.trigger(options.triggerEvent, _this);
            } 
        }
    });
}
0
Saraf Sissddharth