Backbone 中的加载栏 [英] Loading bar in Backbone

问题描述

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

I want to show a loading message/icon until all the items in the list have been rendered.

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

Here is the jsfiddle with my example: http://jsfiddle.net/9R9zU/58/

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

I've tried to add a div with a loading bar in the Feed section, but it doesn't work.

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

How can I show a loading message before all the book views are rendered in the book list view:

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

推荐答案

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

In theory you need to fetch some content asynchronously from somewhere to display the loader. A loading is needed to show the user that you are actually fetching the content and that the UI is not dead. In that fiddle even if you got it working you won't be able to see it because the collection is bootstrapped and you are not fetching anything.

这模拟了(更新了你的小提琴):

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 中的加载栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！