javascript - 为什么人们在主干 View 渲染的第一行正式执行 this.$el.html() ？

Question

下面有一个 Backbone.js View 渲染函数:

var bookListView = Backbone.View.extend({
  model: BooksCollection,

  render: function() {
    this.$el.html(); // lets render this view

    var self = this;

    for (var i = 0; i < this.model.length; ++i) {
      // lets create a book view to render
      var m_bookView = new bookView({
        model: this.model.at(i)
      });

      // lets add this book view to this list view
      this.$el.append(m_bookView.$el);
      m_bookView.render(); // lets render the book           
    }

    return this;
  },
});

我才知道人们通常在渲染函数的开头添加 this.$el.html(); 来渲染 View 。

但是，我不知道为什么这段代码用在第一行。它的工作原理完全相同，即使我删除了第一行。

Answer 1

您通常看到的那一行是 this.$el.html('');。请注意额外的 '' 使其成为 setter，而不是 getter。类似于this.$el.empty()，用于清除 View 中已有的内容。如果它不存在，当您重新渲染 View 以显示更改的数据时，旧数据将保留在其中，因为它是一个 Collection View ，项目只是附加到该 View 。

在这个特定示例的上下文中，假设您现在有 2 本书，如果数据更改为 3 本书，您将重新呈现此 View - 您将在其中有 5 本书而没有可疑行。

事实上 this.$el.html(); 在您共享的代码中没有做任何事情，但是 this.$el.html(''); 修复了一个潜在的错误。我想你错过了 ''