Question

骨干中是否有任何类型的钩子我可以很容易地说＆＃34;每当任何一个集合正在获取数据时，显示微调器，在它们完成时隐藏它＆＃34;？

我觉得它会比这更复杂，需要覆盖特定的功能。我什么时候应该展示微调器？在fetch()或refresh()或其他内容？

Answer 1

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

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

Backbone不会在Collection::fetch()启动时触发任何事件（see source code），因此您必须覆盖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

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

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

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

8 个答案: