Question

我希望显示加载消息/图标，直到列表中的所有项目都已呈现。

的jsfiddle

我尝试在Feed部分添加带加载栏的div，但它不起作用。

如何在图书清单视图中呈现所有图书视图之前显示加载消息：

app.BookListView = Backbone.View.extend({
    el: '.feed',
    initialize: function() {
    this.render();
    this.listenTo( this.collection, 'add', this.renderBook );

Answer 1

以下是一个有效的示例：http://jsfiddle.net/aJfUx/1/

render: function() {
    // Make this loading icon/message whatever you want
    this.$el.html("<i class='icon-spin icon-refresh loading-icon' />");

    this.collection.each(function( item ){
        this.renderBook( item );
    }, this);
    this.$el.find(".loading-icon").remove();

}

这是一个使用setTimeout人工添加一些加载时间的例子，这样你就可以看到旋转器旋转了！

http://jsfiddle.net/7ddXM/

Answer 2

理论上，你需要从某个地方异步fetch一些内容来显示加载器。需要加载才能向用户显示您实际上正在获取内容并且UI尚未死亡。在那个小提琴中，即使你使它工作，你也无法看到它，因为该集合是自助式的，你不会取任何东西。

这模拟了（updated your fiddle）：

app.BookListView = Backbone.View.extend({
  el: '.feed',
    initialize: function() {
      this.loader();
      this.listenToOnce( this.collection, 'sync', this.render); // or listenTo ?
      this.listenTo( this.collection, 'add', this.renderBook );

      // this simulates the fetching...
      // It's not really needed
      var self = this;
      setTimeout(function(){
          self.collection.trigger('sync');
      }, 3000)

    },
    loader: function(){
        this.$el.html('<div>Loading...</div>')
    },
  render: function() {
        this.$el.empty();
    this.collection.each(function( item ){
      this.renderBook( item );
    }, this);

  },
  renderBook: function ( item ) {
    var bookview = new app.BookView ({
      model: item
    });            
    this.$el.append( bookview.render().el );
  } 
});

Backbone中的加载栏

2 个答案: