backbone.js - wie und wann man einen Spinner zeigt

Question

Gibt es irgendwelche Haken im Rückgrat, in dem ich leicht sagen kann: "Immer wenn eine der Sammlungen Daten abholt, zeigen Sie den Spinner, verstecken Sie sie, wenn sie fertig sind."

Ich habe das Gefühl, dass es komplizierter sein wird, und erfordern überschreibende Funktionen. Wann sollte ich den Spinner zeigen? An fetch() oder refresh() oder etwas anderes?

Answer 1

Rückgrat löst kein Ereignis aus, wenn Collection::fetch() beginnt (Siehe Quellcode), also musst du die außerordentlich außer Kraft setzen fetch Methode. Vielleicht so etwas:

var oldCollectionFetch = Backbone.Collection.prototype.fetch;

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

Dadurch wird das außer Kraft gesetzt fetch Methode, um Ihnen ein Ereignis zu geben, wenn der Abruf startet. Dies löst das Ereignis jedoch nur auf der spezifischen Sammlungsinstanz aus. Wenn Sie also eine Reihe verschiedener Sammlungen haben, müssen Sie sich auf diese Veranstaltung in jeder Sammlung anhören.

Answer 2

Sie können JQuery AjaxStart und AjaxStop verwenden. Diese werden weltweit ausgeführt, wenn eine AJAX -Anfrage gestellt wird. Wenn Sie also abrufen und sparen, werden diejenigen ausgeführt. Fügen Sie Ihren Code hinzu, um den Spinner im Start anzuzeigen und am Ende zu verbergen.

Answer 3

In Backbone.js 1.0.0 können Sie die verwenden request und sync Veranstaltungen http://backbonejs.org/#events-catalog Dies geht in der Sicht.

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

Dies kann pro Sammlung oder pro Modell angewendet werden. Hier sind einige CSS für den Spinner http://abandon.ie/notebook/simple-loading-spinner-for-backbonejs

Answer 4

Die Art und Weise, wie ich dies getan habe, ohne das Rückgrat überschrieben zu haben, ist:

Im Hinblick auf

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

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

Die andere Route wäre, die Ladeklasse zu entfernen, wenn die Modelle hinzugefügt werden. Normalerweise haben Sie:

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

Diese wären in den meisten Fällen nahezu identisch, und da der Lader wirklich für die Benutzer des Benutzers ist, bevor die Anzeige des Inhalts sinnvoll ist, ist dies sinnvoll.

Answer 5

Und ein kleines Update. Seit dem 13. Dezember 2012 wurden a hinzugefügt "request" Ereignis zu Backbone.ync, das auslöst, wenn eine Anfrage an den Server gestellt wird. Seit dem 30. Januar 2012 wurden auch a hinzugefügt. "sync" Ereignis, das auslöst, wenn der Zustand eines Modells erfolgreich mit dem Server synchronisiert wurde (erstellen, speichern, zerstören).

Sie müssen also die Methoden des nativen Rückgrates nicht außer Kraft setzen oder ausbauen. Für das Hören von 'Start/Finish -Fetching' -Ereignis können Sie Ihrem Modell/einer solchen Sammlung zum Beispiel den Hörer hinzufügen:

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

Sie können eine Methode namens erstellen sync Auf einem Ihrer Modelle und Backbone.js rufen das an, um zu synchronisieren. Oder Sie können einfach die Methode ersetzen Backbone.sync. Auf diese Weise können Sie die Änderung nur an einem Ort in Ihrem Quellcode vornehmen.

Answer 7

Ich habe benutzt NPROGRESS In meinem Rückgrat und es ist der beste funktionierende Lader/Spinner da draußen.

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

Verwenden Sie die Backbone -Synchronisierungsmethode. Sie werden jedes Mal die Backbone -Synchronisation aufrufen, nicht nur abrufen, speichern, aktualisieren und löschen

/ * Über das Reiten der Synchronisierung anwenden jede Anfrage kommt zu hören, außer direkte 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);
};