从骨干视图部分重新渲染把手

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()在替换列表后调用视图的事件才能正常工作.

根据评论进行编辑:

为了澄清,我在这里建议的方法确实再次执行视图的主要把手模板,但它不再渲染整个视图.

一步步:

1. 像在普通渲染中一样执行Handlebars模板功能.

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

   该变量html现在包含一个HTML标记字符串.什么都没有呈现.

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

   var selector = "#list";
   

3. 找到要替换的DOM元素.这假设您已经渲染了一次视图.否则将不会有任何#list元素this.$el.

   this.$el.find(selector)
   

4. 在模板化的html字符串中找到相应的元素,并用新的元素替换现有的元素:

   .replaceWith($(selector, html));
   

这只会替换#list当前页面上的元素.外面的任何东西#list都不会以任何方式重新呈现或触及.

我建议你这样做的主要原因,而不是分别执行和渲染部分模板,你的视图不需要知道模板和模板引擎的实现细节.所有它需要知道有一个元素#list.我相信这是一个更清洁的解决方案,并使您的模板详细信息与您的视图逻辑分开.