web-dev-qa-db-fra.com

Backbone va chercher le rappel de la bonne façon

Mon application Backbone a une vue appelée schedule , je suis un peu confus quant à la différence d'appeler la fonction appropriée en cas de succès et d'erreur. quelle est la bonne façon d'appeler une fonction d'un routeur placé en vue extérieure:

La première façon: 

        require([
            'app/collections/schedule',
            'app/views/schedule'
        ], function(ScheduleCollection, ScheduleView) {

           var scheduleCollection = new ScheduleCollection(),
            scheduleView = new ScheduleView({
                model: scheduleCollection
            });

            scheduleCollection.fetch({
                reset: true,                
                success: function(){
                    scheduleView.successHandler();
                },
                error: function(){
                    scheduleView.errorHandler()
                }
            });
        });

La seconde façon 

        require([
            'app/collections/schedule',
            'app/views/schedule'
        ], function(ScheduleCollection, ScheduleView) {

           var scheduleCollection = new ScheduleCollection(),
            scheduleView = new ScheduleView({
                model: scheduleCollection
            });

            scheduleCollection.fetch({
                reset: true,                
                success: scheduleView.successHandler(),
                error: scheduleView.errorHandler()                  
            });
        });

dans le calendrier Voir 

successHandler: function(){
   console.log('success');
}


erroHandler: function(){
   console.log('error');
}
javascriptbackbone.jsamd
9
ahmedsaber111

Il existe une autre option: au lieu de référencer directement les vues, fournissez la collection en tant que référence aux vues concernées et écoutez les événements pertinents. Par exemple, écoutez pour la réinitialisation de la collection dans la vue concernée. Si ce n'est pas l'événement auquel vous souhaitez vous connecter, déclenchez un événement personnalisé à partir des rappels de succès/d'erreur que votre vue peut écouter. 

Voici un exemple de réinitialisation de la gestion - étendez votre ScheduleView:

var ScheduleView = Backbone.View.extend({ 

    initialize: function () {

        this.listenTo(this.collection, 'reset', this.handleReset);
    },

    handleReset: function () {
        // do whatever you need to do here
    }
};

var scheduleCollection = new ScheduleCollection();
var scheduleView = new ScheduleView({ collection: scheduleCollection });

voici un exemple d'événements personnalisés liés aux gestionnaires de succès/d'erreur de la collection:

var ScheduleCollection = Backbone.Collection.extend({

    getResults: function () {

        var self = this;

        this.fetch({
            reset: true,
            success: function (collection, response, options) {
                // you can pass additional options to the event you trigger here as well
                self.trigger('successOnFetch');
            },
            error: function (collection, response, options) {
                // you can pass additional options to the event you trigger here as well
                self.trigger('errorOnFetch');
            }
        });
    }
 };

var ScheduleView = Backbone.View.extend({

    initialize: function () {

        this.listenTo(this.collection, 'successOnFetch', this.handleSuccess);
        this.listenTo(this.collection, 'errorOnFetch', this.handleError);
    },

    handleSuccess: function (options) {
        // options will be any options you passed when triggering the custom event
    },

    handleError: function (options) {
        // options will be any options you passed when triggering the custom event
    }
};

var scheduleCollection = new ScheduleCollection();
var scheduleView = new ScheduleView({ collection: scheduleCollection });
scheduleCollection.getResults();

L’avantage de câbler de cette façon est que vous supprimez la dépendance de la collection sur la vue. Ceci est particulièrement important si vous souhaitez que plusieurs vues soient à l'écoute des événements se produisant dans votre collection (ou vos modèles de collection). Il s'agit d'une architecture plus faiblement couplée pour votre application Backbone.

16
kinakuta

La première façon est correcte, la seconde est incorrecte. Mais ce serait très concis:

scheduleCollection.fetch({
    reset: true,                
    success: scheduleView.successHandler,
    error: scheduleView.errorHandler
});

(Bien que ... depuis l'OP, la fonction scheduleView.successHandler n'existe pas, donc cela pourrait poser problème.)

5
McGarnagle

La raison pour laquelle votre deuxième ne fonctionne pas, c'est que vous devez passer une référence à une fonction plutôt que de l'exécuter immédiatement.

var foo = myFunction(); // foo is set to myFunction's return value
var bar = myFunction; // bar is set to a REFERENCE to myFunction

foo === bar // FALSE
bar === myFunction // TRUE

Code corrigé:

scheduleCollection.fetch({
    reset: true,                
    success: scheduleView.successHandler,
    error: scheduleView.errorHandler                  
});

Désormais, si vous souhaitez progresser, utiliser API de promesse jQuery de l'objet XHR renvoyé est supérieur à tous les égards et les rappels ne devraient plus être nécessaires.

scheduleCollection.fetch({ reset: true })
    .then(scheduleView.successHandler, scheduleView.errorHandler);

La différence est que vous obtenez une promesse de retour qui peut être transmise ... mais c'est un sujet pour un post différent. (Fiche sans vergogne) Découvrez adamterlson.com pour ma série en trois parties sur les promesses ....

2
Adam Terlson

Ce que vous devez faire est d’affecter l’objet fonction à 'succès' et 'erreur' et non à la valeur de retour de fonction. 

function(){...}

il retourne un objet fonction et donc success: function () {...}

est juste mais si 

a = function(){...}

et vous faites a() il exécute la fonction et renvoie la valeur de retour et par conséquent success: a() est erroné mais success: a est correct.

0
2292amit