重新绘制把手部分从骨干视图(Re-Rendering Handlebars partial from

2019-08-16 15:41发布

我有一个观点,持​​有把手模板。 该模板由另一部分模板。 这部分模板保存结果,我用我的应用程序的不同部分的列表。 无论如何,尝试筛选结果的时候,我想只渲染的那部分。 这意味着骨干观点不应该渲染整个视图仅仅是局部的。 能不能做到?

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()代替名单后视图的事件才能正常工作。

根据意见修改:

为了澄清,我在这里提出的方法执行view的主要车把再次模板,但它不会再次渲染整个视图。

一步步:

  1. 当你在正常渲染做执行把手模板函数。

     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 。 我相信这是一个清晰的解决方案,并保持你的模板的详细信息,从您的视图逻辑中分离出来。



文章来源: Re-Rendering Handlebars partial from backbone view