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。它用于清除 View 中现有的内容，类似于this.$el.empty()。如果它不存在，当您重新渲染 View 以显示更改的数据时，旧数据将保留在其中，因为它是刚刚附加项目的 Collection View 。

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

事实上 this.$el.html(); 在您共享的代码中不会执行任何操作，但 this.$el.html(''); code> 修复了潜在的错误。我想你错过了''