模型更新时的主干渲染视图答案

【问题标题】：Backbone Render View on model update模型更新时的主干渲染视图
【发布时间】：2023-03-13 20:59:01
【问题描述】：

我正在使用backbone.js 编写一个示例应用程序。

更新我的模型时，我会以这种方式重新渲染我的视图

$('.target').html("");
$('.target').append(this.$el.html(this.template(model)))

一旦在模型更新 [on change event] 后重新渲染视图，附加到 el 的孩子的事件就会丢失 [似乎不像 jQuery live]。这是一个已知问题还是我错过了什么？我应该尝试替换 html 而不是 append 吗？ fiddle

【问题讨论】：

您可能需要修复您的小提琴以使其运行。例如。使用 jQuery 并包括 Underscore 和 Backbone
您不需要两个语句。就用一个：$('.target').html(this.$el.html(this.template(model)))，相当于清空HTML，追加一个
@Mike Fielden 然后我可能需要把我的整个应用程序：D 我认为视图足以理解我的问题
@Matanya 你是对的，我希望它有效。让我做一个最后的测试和复出。我最初在做$this.el.html()，它错过了包装器 div。但是你的解决方案修复了它

【解决方案1】：

一旦视图在 DOM 中，您就不需要继续删除和附加它。我认为最简单的管理方法是从视图中完全删除 DOM 插入，并让 view.render 的调用者来处理它。

查看：

render: function() {
  this.$el.html(this.template(model));
  return this;
}

调用者（第一次渲染时）：

var view = new SomeView();
$('.target').append(view.render().el);

在后续渲染中：

view.render();

在视图被渲染到 DOM 之后，它可以继续愉快地重新渲染自己，而无需了解任何有关父视图的信息。事件绑定也应该在渲染之间保持不变。

【讨论】：

但是追加会添加相同的内容两次或多次我不断更新我的append 的模型仪式因为而不是替换？
@Tamil 的重点是，当您希望第一次显示视图时，您只需 append 一次。之后在视图上调用render 就足够了，因为view.$el 已经在DOM 中了。为了清楚起见，我更新了我的答案。但是是的，$.replaceWith 或任何其他方式都会产生相同的结果。
请注意，如果this 视图包含子视图，则需要在渲染函数中添加this.delegateEvents();。