为什么这个渲染功能不起作用？

Question

我一直在玩骨干并试图学习它.我暂时停留在这一点上.无法弄清楚以下代码有什么问题？

  render: function() {
    this.$el.empty();
    // render each subview, appending to our root element
    _.each(this._views, function(sub_view) {
      this.$el.append(sub_view.render().el); // Error on this line
   });

Answer 1

你有上下文问题.this你提到的不包含$el你正在寻找的东西.您可以通过声明self指向适当的变量来解决此问题this.以下代码应该适合您.

render: function() {
    var self = this; //Added this line to declare variable (self) that point to 'this' 
    this.$el.empty();
    _.each(this._views, function(sub_view) {
      self.$el.append(sub_view.render().el); //Used 'self' here instead 'this' 
});

旁注:当您正在使用主干时,您应该了解文档重排的一个非常常见的JavaScript问题.您将为集合中的每个模型渲染视图.它可能导致性能问题,特别是在旧计算机和移动设备上.您可以通过将所有内容呈现container并附加一次来优化代码,而不是每次都更新DOM.这是一个例子:

render: function() {
  this.$el.empty();
  var container = document.createDocumentFragment();
  _.each(this._views, function(sub_view) {
    container.appendChild(sub_view.render().el)
  });
  this.$el.append(container);
}