Question

我有一个Backbone视图，我正在使用Handlebars在我的视图中加载模板。

我在模板中有一个列表#list，必须在视图中更新，之后需要重新渲染。我想只重新渲染已更改的部分，只重新#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是不是一个好主意？在这种情况下，如何从第一个视图触发列表更新？

由于

Answer 1

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

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

如果list之外的模板中有很多内容，你可以在视图中有两个模板，一个是普通模板，另一个是列表，你会在全局渲染中安装到第一个，这样可以只更新列表。

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

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

只是一些想法。

渲染模板的一部分

1 个答案: