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

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