1

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

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);
    });
  }
});

在这种情况下，我不能只从渲染中返回它并将其结果附加到 StuffCollectionView 的 el 中。我想到的一个技巧是将回调函数传递给 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并且感觉不对。是否有异步渲染子视图的传统方法？

4

2 回答 2

0

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

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

StuffCollectionView = Backbone.View.extend({
  ...
  render: function(){
    var self = this;
    _(function() {
      self.collection.each(addOne, self);
    }).defer();
  }
  ...
});
于 2014-04-20T12:54:51.440 回答
0

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

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

于 2012-11-07T13:45:35.420 回答