Javascript backbone.js-如何以及何时显示微调器

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

---

我有一种感觉，它将比这更复杂，需要覆盖特定的功能。我应该什么时候展示旋转器？在

fetch（）

或

refresh（）

或其他功能上，当

Collection:：fetch（）

启动（）时，主干不会触发任何事件，因此您必须重写

fetch

方法。也许是这样的：

var oldCollectionFetch = Backbone.Collection.prototype.fetch;

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

---

这将覆盖

fetch

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

您可以在任何模型上创建名为

sync

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

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

我在不覆盖主干的情况下这样做的方式是：

鉴于

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

---

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

在Backbone.js 1.0.0中，您可以使用

请求

和

同步

事件 这在视图中显示

    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和一些更新。自2012年12月13日起，在Backbone.sync中添加了一个

“request”

事件，每当开始向服务器发出请求时，该事件就会触发。自2012年1月30日起，还添加了一个

“sync”

事件，只要模型状态与服务器成功同步（创建、保存、销毁），就会触发该事件

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

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

使用主干同步方法， 它将调用每次主干同步的方法，不仅获取、保存、更新和删除也

/*凌驾于同步应用程序之上，除了直接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);
};

我已经在我的主干中使用了，它是功能最好的装载机/旋转器

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

---

如果通读源代码的其余部分，您会注意到fetch调用sync，然后sync使用$.ajax。连接微调器不需要监听主干事件，只需要观察ajax调用。jQuery ajaxStart和ajaxStop就是这样做的。很酷，我不知道美元。ajaxStart/Stop。这将很好地用于网络活动指示器。Nah@ryanmarc使用事件绝对有好处。我写了一篇关于这个的帖子。。。另外，请确保返回原始的fetch调用，否则原始返回值将丢失。是否确实要在每次AJAX调用时触发它，如果只是一个自动AJAX调用，以查看是否有任何新通知（即收件箱计数器、新闻提要计数器）。请求、同步和错误事件是什么它们似乎正是为了这个？只是一个便笺收集。获取（成功，错误）只是jquery ajax方法的快捷方式。您是如何处理显示的“取消”按钮以取消加载的？这一次只处理一个调用，不是吗？因此，如果我想同时观察几个请求，我就不走运了。你可以用一个AJAX计数器来计算正在进行的请求数，从0开始，在ajaxStart时递增，在ajaxStop时递减。但是，您真的想在每次AJAX调用时触发它吗？如果它只是一个自动AJAX调用，以查看是否有任何新通知（即收件箱计数器、新闻提要计数器）。jQuery已经跟踪当前运行的AJAX请求数。您不需要手动跟踪这一点，如果页面进行其他无关的ajax调用，这种想法就行不通。