Backbone.js - как и когда показывать прядильщик

Ответ 1

Магистраль не запускает какое-либо событие при запуске Collection::fetch() (см. исходный код), поэтому вам придется переопределить fetch метод. Может быть, что-то вроде этого:

var oldCollectionFetch = Backbone.Collection.prototype.fetch;

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

Это приведет к переопределению метода fetch, чтобы дать вам событие, когда начинается выборка. Однако это только инициирует событие в конкретном экземпляре коллекции, поэтому, если у вас есть куча разных коллекций, вам придется прослушивать это событие в каждой коллекции.

Ответ 2

Вы можете использовать jQuery ajaxStart и ajaxStop. Они будут выполняться в глобальном масштабе при выполнении запроса ajax, поэтому выборка и сохранение приведут к их запуску. Добавьте свой код, чтобы показать счетчик в начале и скрыть его в конце.

Ответ 3

в Backbone.js 1.0.0 вы можете использовать события request и sync http://backbonejs.org/#Events-catalog Это следует из мнения.

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

Это может применяться для каждой коллекции или для каждой модели здесь CSS для spinner http://abandon.ie/notebook/simple-loading-spinner-for-backbonejs

Ответ 4

То, как я сделал это без переопределения магистральной системы:

В поле зрения

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

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

Другим маршрутом будет удаление класса загрузки при добавлении моделей, обычно у вас есть:

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

В большинстве случаев они были бы почти идентичны, и поскольку загрузчик действительно для пользователей, которые удаляют его непосредственно перед отображением содержимого, имеет смысл.

Ответ 5

И небольшое обновление. С 13 декабря 2012 года было добавлено событие "request" в Backbone.sync, которое запускается всякий раз, когда запрос начинает поступать на сервер. Также с 30 января 2012 года было добавлено событие "sync", которое запускается всякий раз, когда состояние модели успешно синхронизируется с сервером (создавайте, сохраняйте, уничтожайте).

Таким образом, вам не нужно переопределять или расширять собственные методы базовой линии. Для прослушивания события "start/finish fetching" вы можете добавить слушателя в свою модель/коллекцию, например, например:

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

Ответ 6

Вы можете создать метод под названием sync на любой из ваших моделей, и backbone.js вызовет это для синхронизации. Или вы можете просто заменить метод Backbone.sync. Это позволит вам внести изменения только в одном месте в исходном коде.

Ответ 7

Я использовал NProgress в моей позвоночнике, и это лучший функционал загрузчика/счетчика там.

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

Ответ 8

Использовать метод базовой линии, Он будет вызывать каждый раз, когда используется метод базовой линии, а не только выборка, сохранение, обновление и удаление.

/* над сканированием приложения синхронизации каждый запрос приходит, кроме прямого 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);
};