Question

我正在尝试渲染一组项目。通常我会做的是这样的事情：

StuffView = Backbone.View.extend({
  ...
  render: function(){
    ...
    this.$el.html( ... );
    return this;
  }
  ...
});

StuffCollectionView = Backbone.View.extend({
  ...
  render: function(){
    this.collection.each(addOne, this);
  },
  addOne: function(stuff){
    var view = new StuffView({model: stuff});
    this.$el.append(view.render().el);
  }
  ...
});

然而，这次我正在构建一个不同类型的视图。每个StuffView的渲染都需要一些时间，因此我无法同步执行此操作。新StuffView的代码如下所示：

StuffView = Backbone.View.extend({
  ...
  render: function(){
    ...
    // Asynchronous rendering
    SlowRenderingFunction(function(renderedResult){
      this.$el.html(renderedResult);
    });
  }
});

在这种情况下，我不能只从渲染中返回 this 并将其结果附加到StuffCollectionView的el。我想到的一个hack是将回调函数传递给StuffView的渲染，并在渲染完成后让它回调。这是一个例子：

StuffView = Backbone.View.extend({
  ...
  render: function(callback){
    ...
    // Asynchronous rendering
    SlowRenderingFunction(function(renderedResult){
      this.$el.html(renderedResult);
      callback(this);
    });
  }
});


StuffCollectionView = Backbone.View.extend({
  ...
  initialize: function(){
    _.bindAll(this, "onStuffFinishedRendering");
  },
  render: function(){
    this.collection.each(addOne, this);
  },
  addOne: function(stuff){
    var view = new StuffView({model: stuff});
    view.render(onStuffFinishedRendering);
  },
  onStuffFinishedRendering: function(renderedResult){
    this.$el.append(renderedResult.el);
  }
  ...
});

但由于某种原因它不起作用。此外，这感觉太hacky并且感觉不对。是否存在异步呈现子视图的传统方法？

Answer 1

你不能将StuffCollectionView的el 传递给 SlowRenderingFunction吗？这有点讨厌，但我不明白为什么它不起作用。

编辑：我应该说，并使SlowRenderingFunction成为StuffView的实际属性，以便StuffViewCollection可以调用它而不是调用render。

Answer 2

您可以尝试使用_.defer来阻止集合项呈现阻止UI。

有关详细信息，请参阅http://underscorejs.org/#defer。

StuffCollectionView = Backbone.View.extend({
  ...
  render: function(){
    var self = this;
    _(function() {
      self.collection.each(addOne, self);
    }).defer();
  }
  ...
});

在Backbone.js中异步呈现每个集合项

2 个答案: