javascript - template - backbone.js-cómo y cuándo mostrar un spinner

backbonejs github

Question

¿Hay algún tipo de gancho en la red troncal en el que pueda decir fácilmente "cada vez que una de las colecciones obtenga datos, muestre la ruleta, ocúltela cuando haya terminado"?

Tengo la sensación de que será más complicado que eso y requerir sobrescribir funciones específicas. ¿Cuándo debería mostrar el spinner? En fetch() o refresh() o algo más?

Answer 1

He usado NProgress en mi columna vertebral y es el cargador / spinner que mejor funciona.

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 2

La forma en que he hecho esto sin anclar la columna vertebral es:

En vista

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

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

La otra ruta sería eliminar la clase de carga cuando se agregan los modelos, generalmente usted tiene:

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

Estos serían casi idénticos en la mayoría de los casos, y como el cargador es realmente para la experiencia de los usuarios, eliminarlo justo antes de mostrar el contenido tiene sentido.

Answer 3

La red troncal no activa ningún evento cuando se inicia Collection::fetch() ( vea el código fuente ), por lo que tendrá que anular el método fetch . Tal vez algo como esto:

var oldCollectionFetch = Backbone.Collection.prototype.fetch;

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

Esto anulará el método de fetch para darle un evento cuando comience la búsqueda. Sin embargo, esto solo desencadena el evento en la instancia de colección específica, por lo que si tiene varias colecciones diferentes, tendrá que escuchar ese evento en cada colección.

Answer 4

Puede crear un método llamado sync en cualquiera de sus modelos, y backbone.js lo llamará para sincronizarse. O simplemente puede reemplazar el método Backbone.sync. Esto le permitirá realizar el cambio en un solo lugar en su código fuente.

Answer 5

Puede usar jQuery ajaxStart y ajaxStop. Aquellos se ejecutarán globalmente cuando se realice una solicitud de ajax, por lo que buscar y guardar hará que esos se ejecuten. Agregue su código para mostrar la ruleta en el inicio y ocultarla al final.

Answer 6

Utilice el método de sincronización Backbone, llamará a cada vez el método de sincronización de la red troncal, no solo buscar, guardar, actualizar y eliminar también

/ * sobre montar la aplicación de sincronización cada solicitud viene escuchar, excepto 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);
};

Answer 7

Y una pequeña actualización. Desde el 13 de diciembre de 2012, se agregó un evento de "request" a Backbone.sync, que se activa cada vez que se inicia una solicitud en el servidor. Además, desde el 30 de enero de 2012, se agregó un evento de "sync" , que se activa cada vez que el estado de un modelo se sincroniza con éxito con el servidor (crear, guardar, destruir).

Por lo tanto, no es necesario anular o extender los métodos del Backbone nativo. Para escuchar el evento de "inicio / finalización de búsqueda", puede agregar oyente a su modelo / colección de esta manera, por ejemplo:

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 8

en Backbone.js 1.0.0 puede usar la request y sync eventos backbonejs.org/#Events-catalog Esto va en la vista.

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

Esto se puede aplicar por colección o por modelo aquí hay un poco de CSS para el spinner http://abandon.ie/notebook/simple-loading-spinner-for-backbonejs