javascript Backbone.js - 如何以及何时显示微调器

backbone.js - how and when to show a spinner

提问by Matthew

Is there any sort of hooks in backbone where I can easily say "whenever any of the collections is fetching data, show the spinner, hide it when they're done"?

主干中是否有任何类型的钩子，我可以轻松地说“每当任何集合获取数据时，显示微调器，完成后隐藏它”？

I have a feeling it will be more complicated than that and require overwriting specific functions. When should I show the spinner? On fetch()or refresh()or something else?

我有一种感觉，它会比这更复杂，需要覆盖特定的功能。我应该什么时候展示微调器？在fetch()或refresh()或别的什么？

采纳答案by Sam

Backbone doesn't trigger any event when Collection::fetch()starts (see source code), so you will have to override the fetchmethod. Maybe something like this:

Backbone 在Collection::fetch()启动时不会触发任何事件（请参阅源代码），因此您必须覆盖该fetch方法。也许是这样的：

var oldCollectionFetch = Backbone.Collection.prototype.fetch;

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

This will override the fetchmethod to give you an event when the fetch starts. However, this only triggers the event on the specific collection instance so if you have a bunch of different collections you'll have to listen for that event on each collection.

这将覆盖该fetch方法以在提取开始时为您提供一个事件。但是，这只会触发特定集合实例上的事件，因此如果您有一堆不同的集合，则必须在每个集合上侦听该事件。

回答by ryanmarc

You can use jQuery ajaxStart and ajaxStop. Those will globally run when an ajax request is made, so fetch and save will cause those to run. Add your code to show the spinner in the start and hide it in the end.

您可以使用 jQuery ajaxStart 和 ajaxStop。这些将在发出 ajax 请求时全局运行，因此 fetch 和 save 将导致它们运行。添加您的代码以在开始时显示微调器并在最后隐藏它。

回答by roo2

in Backbone.js 1.0.0 you can use the requestand syncevents http://backbonejs.org/#Events-catalogThis goes in the view.

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

This can be applied per collection or per model here's some CSS for the spinner http://abandon.ie/notebook/simple-loading-spinner-for-backbonejs

这可以应用于每个集合或每个模型这里是微调器的一些 CSS http://abandon.ie/notebook/simple-loading-spinner-for-backbonejs

回答by andy t

The way i have done this without overriding backbone is:

我在不覆盖主干的情况下完成此操作的方法是：

In view

在视图中

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

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

The other route would be to remove the loading class when the models are added, usually you have:

另一种方法是在添加模型时删除加载类，通常您有：

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

These would be almost identical in most cases, and as the loader is really for the users experience removing it just prior to displaying the content makes sense.

在大多数情况下，这些几乎是相同的，因为加载器实际上是为了用户体验，在显示内容之前删除它是有意义的。

回答by Jake Blues

And a little update. Since Dec. 13, 2012 have been added a "request"event to Backbone.sync, which triggers whenever a request begins to be made to the server. As well since Jan. 30, 2012 have been added a "sync"event, which triggers whenever a model's state has been successfully synced with the server (create, save, destroy).

还有一点更新。自 2012 年 12 月 13 日起，"request"向 Backbone.sync添加了一个事件，该事件在开始向服务器发出请求时触发。自 2012 年 1 月 30 日以来，还添加了一个"sync"事件，只要模型的状态与服务器成功同步（创建、保存、销毁），就会触发该事件。

So, you don't need to override or extand the native Backbone's methodes. For listening 'start/finish fetching' event you can add listener to your model/collection like this for example:

因此，您不需要覆盖或扩展本机 Backbone 的方法。对于侦听“开始/完成获取”事件，您可以像这样将侦听器添加到模型/集合中，例如：

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

回答by Mr. Crowley

I have used NProgressin my backbone and it is the best functioning loader/spinner out there.

我在我的主干中使用了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);
               }
          });
      }
});

回答by Lyn Headley

You can create a method called syncon any of your models, and backbone.js will call that in order to sync. Or you can simply replace the method Backbone.sync.This will allow you to make the change in only one place in your source code.

您可以创建一个sync在您的任何模型上调用的方法，backbone.js 将调用该方法以进行同步。或者您可以简单地替换方法Backbone.sync.这将允许您仅在源代码中的一个地方进行更改。

回答by Harish.bazee

Use Backbone sync method, It will call every time backbone sync method, not only fetch, save, update and delete also

使用 Backbone 同步方法，它会在每次调用 Backbone 同步方法，不仅获取、保存、更新和删除

/* over riding of sync application every request come hear except direct ajax */

/* 除直接 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);
};