从主干视图重新渲染部分车把

Question

我有一个视图，其中包含车把模板。 该模板由另一个部分模板组成。 该部分模板包含一个结果列表，我在我的应用程序的不同部分使用它。 无论如何，在尝试过滤结果时，我只想渲染那部分。意思是主干视图不应该只渲染整个视图的一部分。 可以吗？

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() 才能使视图事件正常工作。

基于 cmets 编辑：

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

一步一步：

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

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

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

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

   var selector = "#list";
   

3. 找到要替换的 DOM 元素。这假定您已经渲染了一次视图。否则this.$el 中将没有#list 元素。

   this.$el.find(selector)
   

4. 在模板化的html字符串中找到对应的元素，将现有元素替换为新元素：

   .replaceWith($(selector, html));
   

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

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