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

Question

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

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

Answer 1

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

Answer 2

在 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 http://abandon.ie/notebook /simple-loading-spinner-for-backbonejs

Answer 3

当 Collection::fetch() 启动时，Backbone 不会触发任何事件 (查看源代码），因此您必须重写 fetch 方法。也许是这样的：

var oldCollectionFetch = Backbone.Collection.prototype.fetch;

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

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

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

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

Answer 5

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

因此，您不需要覆盖或扩展本机 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
    }
});

Answer 6

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

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

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