Backbone.js - comment et quand montrent une fileuse

Question

Y at-il sorte de crochets dans la structure centrale où je peux facilement dire « chaque fois que des collections est la récupération des données, afficher la fileuse, le cacher quand ils sont fait »?

J'ai le sentiment que ce sera plus compliqué que cela et nécessitent des fonctions spécifiques d'écraser. Quand dois-je montrer la fileuse? Sur fetch() ou refresh() ou autre chose?

Answer 1

Backbone ne déclenche pas un événement au démarrage de Collection::fetch() ( voir le code source ), vous aurez ainsi remplacer la méthode de fetch. 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);
}

Ceci remplacera la méthode fetch pour vous donner un événement lorsque le début d'extraction. Toutefois, cela déclenche seulement l'événement sur l'instance de collecte spécifique, donc si vous avez un tas de différentes collections vous devrez écouter cet événement sur chaque collection.

Answer 2

Vous pouvez utiliser jQuery ajaxStart et ajaxStop. Ceux se déroulera dans le monde lorsqu'une demande ajax est faite, donc chercher et sauver ceux causera à courir. Ajoutez votre code pour afficher la fileuse au début et à la cacher à la fin.

Answer 3

Backbone.js 1.0.0 vous pouvez utiliser les événements request et sync 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 quelques CSS pour la fileuse http: // abandonner. à-dire / portable / simple chargement-fileur-pour-backbone.js

Answer 4

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

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 la classe de chargement lorsque les modèles sont ajoutés, généralement vous:

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);
  }
})

Ceux-ci seraient presque identiques dans la plupart des cas, et que le chargeur est vraiment pour les utilisateurs de l'expérience de le retirer juste avant d'afficher le contenu logique.

Answer 5

Et une petite mise à jour. Depuis le 13 décembre 2012 ont été ajoutés un événement "request" à Backbone.sync, ce qui déclenche chaque fois qu'une demande commence à apporter au serveur. De plus, depuis le 30 janvier 2012 ont été ajoutés un événement "sync", ce qui déclenche chaque fois que l'état d'un modèle a été synchronisé avec le serveur (créer, enregistrer, détruire).

Alors, vous n'avez pas besoin de modifier ou de Extand du natif Methodes Backbone. Pour une écoute « départ / arrivée fetching » événement, vous pouvez ajouter à votre écoute 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
    }
});

Answer 6

Vous pouvez créer une méthode appelée sync sur l'un de vos modèles, et Backbone.js fera appel que pour la synchronisation. 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.

Answer 7

J'ai utilisé NProgress dans ma colonne vertébrale et il est le meilleur chargeur de fonctionnement / spinner là-bas.

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);
               }
          });
      }
});

Answer 8

Utilisation procédé de synchronisation de réseau fédérateur, Il appellera à chaque fois que la méthode de synchronisation de colonne vertébrale, non seulement Fetch, sauvegarder, mettre à jour et supprimer également

/ * sur l'équitation d'application de synchronisation toutes les demandes viennent entendre sauf ajax directe * /

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);
};