问题 Backbone渲染视图模型更新


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

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

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

在模型更新[on change event]之后重新呈现视图时,附加到的事件 el孩子们迷路了[似乎并不像 jQuery 生活]。这是一个已知问题还是我错过了什么?我应该尝试替换html而不是 append小提琴


8870
2017-12-19 16:04


起源

您可能想要修复您的小提琴,以便它运行。例如。使用jQuery并包括Underscore和Backbone - Mike Fielden
你不需要两个陈述。只需使用一个: $('.target').html(this.$el.html(this.template(model))),这相当于清除HTML并附加一个新的HTML - Matanya
@Mike Fielden然后我可能需要把我的整个应用程序:D我认为这个视图足以理解我的问题 - Tamil
@Matanya你是对的我希望它有效。让我做一个最后的测试和回归。我最初在做 $this.el.html() 错过了包装div。但你的解决了它 - Tamil


答案:


一旦视图在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之后,它可以愉快地重新渲染自身,而无需了解有关父视图的任何信息。事件绑定在渲染之间也应保持不变。


10
2017-12-19 16:15



但追加会添加相同的内容两次或多次我不断更新我的模型礼仪coz append 而不是替换? - Tamil
@Tamil重点是你只有 append 它曾经,当你想要首次显示视图时。之后就足够打电话了 render 在视图上,因为 view.$el 已经在DOM中了。为了清楚起见,我更新了答案。但是,是的, $.replaceWith 或任何其他方式将具有相同的结果。 - jevakallio
@fenciff我不知道这个:)它工作得很好:) - Tamil
请注意,如果 this 视图包含子视图,在渲染功能中需要添加 this.delegateEvents();。 - Lukas