javascript - 可以将 subview 附加到 backbone.js 中的网格吗？

Question

我正在通过服务 onReady 加载 JSON 数据(对象数组)，并希望在网格中显示此数据。我用一个 View 表示每一行。

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

是否可以构建 subview 并将它们一次全部推送到 DOM 而不是一个一个地推送？浏览器回流和重绘是否在每次追加时发生？

我见过人们添加 subview / subview 的所有方法，但没有一个能解决问题(频繁访问 DOM？)，因为主干就是这样构建的？

Answer 1

是的，这是可以做到的。使用 jQuery(使用 View 的 tagName 定义和 attributes 等)生成一个 html 元素，然后将所有内容附加到该元素。完成后，将当前的 this.$el 换成新的:

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

应该这样做。

当然，您会在屏幕上看到一点闪烁，这取决于浏览器的速度和变化的大小。但这应该会让您走上自己想做的路。

关于 replaceWith 的更多信息:http://api.jquery.com/replaceWith/