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

Question

在骨干中是否有任何类型的钩子,我可以很容易地说"无论何时任何集合都在获取数据,显示微调器,在它们完成时隐藏它"？

我觉得它会比这更复杂,需要覆盖特定的功能.我什么时候应该展示微调器？上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()启动时不会触发任何事件(请参阅源代码),因此您必须覆盖该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);
  }
})

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