backbone.js - comment et quand le spectacle d'un spinner

Est-il une sorte de crochets de la colonne vertébrale où je peux facilement dire "à chaque fois que les collections de l'extraction de données, afficher le compteur, le cacher quand ils ont terminé"?

J'ai le sentiment que ça va être plus compliqué que cela, et nécessitent l'écrasement des fonctions spécifiques. Quand dois-je montrer le spinner? Sur fetch() ou refresh() ou autre chose?

InformationsquelleAutor Matthew | 2011-04-29
  1. 11

    Épine dorsale n'est pas de déclencher un événement lorsque Collection::fetch() commence (voir le code source), de sorte que vous aurez à remplacer les fetch méthode. Peut-être quelque chose comme ceci:

    var oldCollectionFetch = Backbone.Collection.prototype.fetch;

Backbone.Collection.prototype.fetch = function(options) {
    this.trigger("fetch:started");
    oldCollectionFetch.call(this, options);
}

    Cela va remplacer le fetch méthode pour vous donner un événement lors de l'extraction commence. Toutefois, cela ne déclenche l'événement sur les instance de la collection, donc si vous avez un tas de différentes collections, vous aurez à écouter pour cet événement sur chaque collection.

    • Si vous lisez le reste de la source, vous remarquerez que l'extraction des appels de synchronisation, qui utilise alors $.ajax. Vous n'avez pas besoin d'écouter une épine dorsale de l'événement pour joindre un spinner, vous avez juste besoin de regarder pour un appel ajax. jQuery ajaxStart et ajaxStop de le faire. documentcloud.github.com/backbone/docs/...
    • Cool, je ne savais pas à propos de $.ajaxStart/Stop. Ça pourrait être sympa à utiliser pour un réseau de l'indicateur d'activité.
    • Nah @ryanmarc il y a certainement des avantages à utiliser un événement. J'ai écrit un post sur ce, tbranyen.com/post/how-to-indicate-backbone-fetch-progress ... aussi assurez-vous de retourner l'original de l'extraction de l'appel autrement l'original de la valeur de retour est perdu.
    • Voulez-vous vraiment à le lancer sur chaque appel AJAX, si c'est simplement un automatique de l'appel AJAX pour voir s'il y a des nouvelles notifications (c'est à dire de la Boîte de réception Contre, les News, Compteur).
    • Ce qui est bien avec la demande, la synchronisation et les événements d'erreur? backbonejs.org/#Events-catalog - ils semblent être exactement pour cela?
    InformationsquelleAutor Sam
  2. 36

    Vous pouvez utiliser jQuery ajaxStart et ajaxStop. Ceux-ci vont à l'échelle mondiale lorsqu'une requête ajax, afin de récupérer et de sauvegarder sera la cause de ces. Ajouter votre code pour afficher la touche de navigation dans le démarrage et le cacher dans la fin.

    • Ce ne gère qu'un seul appel à la fois n'est-ce pas? Donc, si je veux regarder plusieurs requêtes en parallèle, je suis hors de la chance.
    • Vous pourriez avoir un AJAX compteur pour compter le nombre de demandes en cours, commencer avec 0, l'incrémenter quand ajaxStart et de décrémentation quand ajaxStop. Mais avez-vous vraiment envie de le lancer sur chaque appel AJAX, si c'est simplement un automatique de l'appel AJAX pour voir s'il y a des nouvelles notifications (c'est à dire de la Boîte de réception Contre, les News, Compteur).
    • jQuery déjà des pistes le nombre actuel de l'exécution de requêtes ajax. Vous n'avez pas besoin de garder une trace de ce travail manuellement.
    • Cette idée ne fonctionne pas si la page fait d'autres sans rapport avec les appels ajax.
    InformationsquelleAutor ryanmarc
  3. 25

    dans Backbone.js 1.0.0 vous pouvez utiliser le request et sync événements http://backbonejs.org/#Events-catalog
    Cela va dans la vue. 

        initialize: function(){
        this.items = new APP.Collections.itemCollection();
        this.items.bind('request', this.ajaxStart, this);
        this.items.bind('sync', this.ajaxComplete, this);
    }

    ajaxStart: function(arg1,arg2,arg3){
        //start spinner
        $('#item-loading').fadeIn({duration:100});
    },
    ajaxComplete: function(){
        $('#item-loading').fadeOut({duration:100});
    }

    Ceci peut être appliqué par collection ou par modèle, voici un peu de CSS pour le spinner http://abandon.ie/notebook/simple-loading-spinner-for-backbonejs

    InformationsquelleAutor roo2
  4. 8

    La façon dont je l'ai fait sans écraser épine dorsale est:

    En vue

    var myView = Backbone.View.extend({
  initialize; function(){

    this.$el.addClass('loading');
    collection.fetch(success:function(){
      this.$el.removeClass('loading')
    })
  }
})

    L'autre voie serait de supprimer le chargement de la classe lorsque les modèles sont ajoutés, en général, vous avez:

    var myView = Backbone.View.extend({
  initialize; function(){
    _.bindAll(this, 'addAll')
    collection.bind('reset', this.addAll)

    this.$el.addClass('loading');
    collection.fetch();
  },
  addAll: function(){
    this.$el.removeClass('loading');
    collection.each(this.addOne);
  }
})

    Ces serait presque identique dans la plupart des cas, et que le chargeur est vraiment pour les utilisateurs de l'expérience de l'enlever juste avant l'affichage du contenu de sens.

    • Juste une note de collecte.fetch(succès, erreur) sont juste des raccourcis pour l'ajax de jquery méthode.
    • comment avez-vous gérer bouton "annuler" pour être montré pour annuler le chargement ?
    InformationsquelleAutor andy t
  5. 3

    Et un peu de mise à jour. Depuis Déc. 13, 2012 ont été ajoutés un "request" événement Fédérateur.de synchronisation, ce qui déclenche à chaque fois qu'une demande commence à être effectuée sur le serveur. Ainsi, depuis Janv. 30, 2012 ont été ajoutés un "sync" événement, qui déclenche à chaque fois que les modèles de l'état a été correctement synchronisé avec le serveur (créer, d'enregistrer, de les détruire).

    Donc, vous n'avez pas besoin de remplacer ou de extand le natif de l'épine Dorsale de méthodes. Pour l'écoute de départ/arrivée de l'extraction de l'événement, vous pouvez ajouter un écouteur à votre modèle/collection comme ceci par exemple:

    var view = new Backbone.View.extend({
    initialize: function() {
        this.listenTo(this.model, 'request', this.yourCallback); //start fetching
        this.listenTo(this.model, 'sync', this.yourCallback); //finish fetching
    }
});
    InformationsquelleAutor Jake Blues
  6. 1

    Vous pouvez créer une méthode appelée sync sur l'un de vos modèles, et backbone.js appellent pour se synchroniser. Ou vous pouvez simplement remplacer la méthode Backbone.sync. Cela vous permettra de faire le changement dans un seul endroit dans votre code source.

    InformationsquelleAutor Lyn Headley
  7. 1

    J'ai utilisé NProgress dans ma colonne vertébrale et c'est le meilleur fonctionnement du chargeur/spinner là.

    var view = Backbone.View.extend({
     initialize: function () {
          this.items = new APP.Collections.itemCollection();
          this.items.on('reset', this.myAddFunction, this);
          NProgress.start();
          collection.fetch({
               reset:true,
               success: function () {
                   NProgress.done(true);
               }
          });
      }
});
    InformationsquelleAutor Mr. Crowley
  8. 0

    Utilisation épine Dorsale méthode de synchronisation,
    Il fera appel à chaque fois épine dorsale méthode de synchronisation, pas uniquement extraire, enregistrer, mettre à jour et supprimer également

    /* cours d'équitation de l'application de synchronisation de chaque demande de venir l'entendre, sauf direct ajax */

    Backbone._sync = Backbone.sync;
Backbone.sync = function(method, model, options) {
    //Clone the all options
    var params = _.clone(options);

params.success = function(model) {
    //Write code to hide the loading symbol
     //$("#loading").hide();
    if (options.success)
        options.success(model);
};
params.failure = function(model) {
    //Write code to hide the loading symbol
     //$("#loading").hide();
    if (options.failure)
        options.failure(model);
};
params.error = function(xhr, errText) {
    //Write code to hide the loading symbol
     //$("#loading").hide();
    if (options.error)
        options.error(xhr, errText);
};
//Write code to show the loading symbol
     //$("#loading").show();
Backbone._sync(method, model, params);
};
    InformationsquelleAutor Harish.bazee