Backbone.js - Cómo y cuándo mostrar un spinner

Question

¿Hay algún tipo de ganchos en la columna vertebral donde pueda decir fácilmente "cada vez que alguna de las colecciones está obteniendo datos, muestre el spinner, esconderlo cuando estén terminados"?

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

Answer 1

Backbone no desencadena ningún evento cuando Collection::fetch() empieza (Ver código fuente), por lo que tendrás que anular el fetch método. Quizás 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 fetch Método 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 un montón de colecciones diferentes, tendrá que escuchar ese evento en cada colección.

Answer 2

Puede usar jQuery AjaxStart y Ajaxstop. Esos se ejecutarán globalmente cuando se realice una solicitud AJAX, por lo que buscar y guardar hará que se ejecuten. Agregue su código para mostrar el spinner al principio y ocultarlo al final.

Answer 3

En Backbone.js 1.0.0 puede usar el request y sync eventos http://backbonejs.org/#events-catalog Esto va a 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 algunos CSS para el spinner http://abandon.ie/notebook/simple-loading-spinner-for-backbonejs

Answer 4

La forma en que he hecho esto sin anular 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 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 5

Y una pequeña actualización. Desde el 13 de diciembre de 2012 se ha agregado un "request" Evento a Backbone.sync, que se desencadena cada vez que una solicitud comienza a hacerse al servidor. Además, desde el 30 de enero de 2012 se ha agregado un "sync" El evento, que se desencadena cada vez que el estado de un modelo se ha sincronizado con éxito con el servidor (crear, guardar, destruir).

Por lo tanto, no necesita anular o extender los métodos nativos de la red troncal. Para escuchar el evento 'iniciar/terminar con la búsqueda', puede agregar un oyente a su modelo/colección como esta, 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 6

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

Answer 7

he utilizado NPROGRE En mi columna vertebral y es el mejor cargador/spinner en funcionamiento.

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

Use el método de sincronización de backbone, llamará al método de sincronización de backbone cada vez, no solo obtendrá, guardar, actualizar y eliminar también

/ * Sobre la conducción de la aplicación de sincronización Cada solicitud Ven a escuchar excepto AJAX directo */

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