backbone.js - 从主干 View 重新渲染部分 Handlebars

Question

我有一个 View ，其中包含 Handlebars 模板。 该模板由另一个部分模板组成。 该部分模板包含一个结果列表，我在应用程序的不同部分中使用它。 无论如何，当尝试过滤结果时，我想仅渲染该部分。这意味着主干 View 不应仅呈现整个 View 的部分 View 。 可以吗？

Answer 1

是的，这是可能的。最简单的方法是像渲染完整 View 时一样执行整个模板，但仅替换 View 的 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() 以使 View 的事件正常工作。

根据评论进行编辑:

为了澄清，我在这里建议的方法确实再次执行 View 的主 Handlebars 模板，但它不会再次渲染整个 View 。

一步一步:

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

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

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

2. 为您想要重新渲染的元素定义一个选择器。

   var selector = "#list";
   

3. 查找要替换的 DOM 元素。这假设您已经渲染过一次 View 。否则 this.$el 中将不会有 #list 元素。

   this.$el.find(selector)
   

4. 在模板化的 html 字符串中查找相应的元素，并将现有元素替换为新元素:

   .replaceWith($(selector, html));
   

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

我建议您这样做而不是单独执行和渲染部分模板的主要原因是您的 View 不需要了解有关模板和模板引擎的实现细节的任何信息。它只需要知道有一个元素#list。我相信这是一个更干净的解决方案，并将模板详细信息与 View 逻辑分开。