可能要追加子视图一次电网Backbone.js的？ [英] Possible to append subviews once to grid in backbone.js?

问题描述

我加载通过服务，onReady JSON数据（对象数组），并希望在网格中显示此数据。我有每一行再由视图psented $ P $。

I'm loading JSON data (array of objects) via service, onReady, and want to display this data in a grid. I have each row represented by a view.

        render: function(){
            var self = this;
            (self.collection.models).forEach( function(model){
                var rowView = new RowView({model: model});
                self.$el.append(rowView.render().el);
            });                
        }

是否有可能建立子视图，并立即推送到DOM的，而不是由1去1？是否浏览器回流＆安培;重绘发生在每一个附加？

Is it possible to build subviews and push them all at once to the DOM instead of going 1 by 1? Does the browser reflow & repaint happen on every append?

我见过的人子视图添加/孩子，但他们没有解决问题（经常访问DOM？），因为这是骨干仅仅是如何构建的？

Ive seen all the ways people add subviews/children, but none of them solve the problem (frequent DOM access?) because this is just how backbone is built?

推荐答案

是啊，这是可以做到。生成与jQuery（视图的标签名定义和属性使用和所有）HTML元素然后追加一切的。当你完成后，换出电流这$埃尔用新的：

Yeah, that can be done. Generate an html element with jQuery (using the view's tagName definition and attributes and all that) and then append everything to that. When you're done, swap out the current this.$el with the new one:

render: function(){

  // create in memory element
  var $el = $(this.tagName);
  // also get the `className`, `id`, `attributes` if you need them

  // append everything to the in-memory element
  this.collection.each(function(model){
    var rowView = new RowView({model: model});
    $el.append(rowView.render().el);
  });

  // replace the old view element with the new one, in the DOM
  this.$el.replaceWith($el);

  // reset the view instance to work with the new $el
  this.setElement($el);
}

这应该这样做。

当然，你会在屏幕上看到有点闪烁，这取决于浏览器是如何快速和有多大的变化。但是，这应该让你在路上做你想做的。

Of course, you're going to see a bit of a flicker on the screen, depending on how fast the browser is and how large the change is. But this should get you down the road to do what you want.

有关replaceWith更多信息： http://api.jquery.com/replaceWith/

More info about replaceWith: http://api.jquery.com/replaceWith/

这篇关于可能要追加子视图一次电网Backbone.js的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！