javascript - 渲染模板的部分内容

Question

我有一个 Backbone View ，并且使用 Handlebars 在我的 View 中加载模板。

我的模板中有一个列表#list，必须在 View 中更新，然后需要重新渲染。 我只想重新渲染已更改的部分，因此仅重新渲染 #list 而无需重新加载我的所有 DOM(以及我拥有的所有 Handlebars 帮助器)。

我试过这个:

template: Handlebars.compile(templateHtml),

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

renderList: function() {
  var html = this.template(this.model.toJSON());
  var selector = "#list";

  this.$el.find(selector).replaceWith($(selector, html));
}

但这非常慢，因为我认为它会在根据需要更改 #list 内容之前重新渲染所有 DOM。

有更好的方法吗？

将#list的内容放在另一个模板中并将其作为subView加载是个好主意吗？ 在这种情况下，如何从第一个 View 触发列表更新？

谢谢

Answer 1

最好通过创建专用的渲染方法来更新渲染 View 的一部分，我explained here .

在你的情况下，看起来你必须从模板构建整个 html View ，只是为了更新它的一部分。如果您想将模板保留为一个模板，那么这很简洁。

如果模板中确实有很多超出 list 的内容，您的 View 中可以有两个模板，一个是通用模板，另一个仅用于列表，您将在全局渲染上将其安装到第一个模板中，其优点是能够仅更新列表。

此外，如果 #list ，您甚至可能不需要第二个模板只是一个列表的容器。我可以想象这可能是 <ul>您将在全局渲染期间将其安装在正确的位置，然后使用其他自定义渲染方法更新它。

此外，我在这里写了一个示例，这可能对您的情况有帮助: Backbone.js fetch() JSON to model get() returnes undefined - 在示例中，有一个模板，其中有一个列表容器，并且该列表由它自己的集合单独管理。

只是一些想法。