从Backbone视图重新呈现Handlebars部分

Question

我有一个视图，其中包含Handlebars模板。 该模板由另一个部分模板组成。 该部分模板包含一系列结果，我在应用程序的不同部分中使用它们。 无论如何，当尝试过滤结果时，我想只呈现那一部分。也就是说，Backbone视图不应该呈现整个视图，而只是部分内容。 这能做到吗？

- tomerz

Answer 1

是的，这是可能的。最简单的方法是像渲染完整视图时执行整个模板一样操作，但只替换视图中需要更改的el部分。

可以尝试如下操作：

template: Handlebars.compile(templateHtml),

render: function() {
  //let's say your render looks something like this
  this.$el.html(this.template(this.model.toJSON());
},

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

  //replace only the contents of the #list element
  this.$el.find(selector).replaceWith($(selector, html));
}

根据您的模板动态程度，替换列表后为使视图事件正常工作，您可能需要调用this.delegateEvents()。

基于评论进行编辑：

澄清一下，我在这里提出的方法确实会再次执行视图的主Handlebars模板，但它不会重新渲染整个视图。

步骤如下：

1. 像正常渲染一样执行Handlebars模板函数。

var html = this.template(this.model.toJSON());

变量html现在包含一个HTML标记的字符串。尚未呈现任何内容。

2. 定义要重新呈现的元素的选择器。

var selector = "#list";

找到需要替换的DOM元素。这意味着您已经至少渲染了一次视图。否则，在this.$el中将没有#list元素。

this.$el.find(selector)

3. 找到模板化的 HTML 字符串中对应的元素，并用新元素替换现有元素：

.replaceWith($(selector, html));

这将仅替换当前页面上的#list元素。在#list之外的任何内容都不会重新渲染或以任何方式触及。

我提议您以这种方式而不是单独执行和呈现部分模板的原因是，您的视图不需要了解模板和模板引擎的实现细节。它只需要知道有一个元素#list存在。我认为这是一种更清洁的解决方案，并将模板细节与视图逻辑分开。

- jevakallio

---

仍然无法使其工作...我的视图内部的模板不是恒定的，初始化方法定义了它。所以我之前试图再次设置它...我的方法看起来像这样： this.template = Handlebars.compile($('#tmpl-news-partial').html()); var html = this.template({news: this.collection.toJSON()}); var selector = "#newssList"; this.$el.find(selector).replaceWith($(selector, html)); this.template = Handlebars.compile($('#tmpl-list-news').html()) - tomerz

@tomerz，不客气。顺便说一下，你最终解决问题的方式并不完全是我想要的，但如果它能够工作，那也很好。另外，您无需将临时模板设置为this.template，然后再将其更改回来，您可以将其命名为this.partialTemplate或其他任何名称，或者只使用本地变量即可。 - jevakallio

我认为Handlebars的模板方法是使用this.template，不是吗？我能否传递另一个模板给它？ - tomerz

无法渲染整个视图...整个视图包含一个筛选文本框，因此我只想渲染部分。 - tomerz

请注意，如果＃list是html中的顶级选择器，则此方法将无效，因为$（selector，html）等同于$（html）.find（selector），它只会匹配匹配项集合的后代元素（其中＃list将是其中之一）。因此，在这种情况下，您必须使用filter。 - Josh Leitzel