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

この場合、 render からこれを返して、その結果を StuffCollectionView の el に追加することはできません。私が考えた 1 つのハックは、コールバック関数を 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);
  }
  ...
});

しかし、何らかの理由で機能していません。さらに、これはハッキリしすぎて、正しくないと感じます。子ビューを非同期にレンダリングする従来の方法はありますか?

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 に答える