-1

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

这是带有我的示例的 jsfiddle：http: //jsfiddle.net/9R9zU/58/

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

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

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

2 回答 2

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/

于 2013-09-04T23:28:34.687 回答
1

理论上，您需要fetch从某处异步获取一些内容来显示加载器。需要加载以向用户显示您实际上正在获取内容并且 UI 没有死。在那个小提琴中，即使你让它工作了，你也看不到它，因为集合是自举的，你没有获取任何东西。

这模拟了（更新了你的小提琴）：

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 );
  } 
});
于 2013-09-04T23:29:50.863 回答