backbone.js – 从骨干视图重新渲染Handlebars

我有一个视图,它持有句柄模板.
该模板由另一部分模板组成.
该部分模板包含我在应用程序的不同部分使用的结果列表.
无论如何,当尝试过滤结果时,我想只渲染那部分.意思是骨干视图不应该仅渲染整个视图.
可以做吗

解决方法

是的,这是可能的.最简单的方法是在渲染完整视图时执行整个模板,但只能在视图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模板功能.

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

变量html现在包含一个HTML标记字符串.还没有呈现.
>为要重新呈现的元素定义一个选择器.

var selector = "#list";

>查找要替换的DOM元素.这假设您已经呈现了一次视图.否则,将在此$el中没有#list元素.

this.$el.find(selector)

>在模板化的html字符串中查找相应的元素,并用现有的元素替换新元素：

.replaceWith($(selector,html));

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

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

原文地址：https://www.jb51.cc/js/152983.html