我有一个视图,其中包含Handlebars模板。 该模板由另一个部分模板组成。 该部分模板包含一系列结果,我在应用程序的不同部分中使用它们。 无论如何,当尝试过滤结果时,我想只呈现那一部分。也就是说,Backbone视图不应该呈现整个视图,而只是部分内容。 这能做到吗?
我有一个视图,其中包含Handlebars模板。 该模板由另一个部分模板组成。 该部分模板包含一系列结果,我在应用程序的不同部分中使用它们。 无论如何,当尝试过滤结果时,我想只呈现那一部分。也就是说,Backbone视图不应该呈现整个视图,而只是部分内容。 这能做到吗?
是的,这是可能的。最简单的方法是像渲染完整视图时执行整个模板一样操作,但只替换视图中需要更改的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模板,但它不会重新渲染整个视图。
步骤如下:
像正常渲染一样执行Handlebars模板函数。
var html = this.template(this.model.toJSON());
变量html
现在包含一个HTML标记的字符串。尚未呈现任何内容。
定义要重新呈现的元素的选择器。
var selector = "#list";
找到需要替换的DOM元素。这意味着您已经至少渲染了一次视图。否则,在this.$el
中将没有#list
元素。 this.$el.find(selector)
找到模板化的 HTML 字符串中对应的元素,并用新元素替换现有元素:
.replaceWith($(selector, html));
这将仅替换当前页面上的#list
元素。在#list
之外的任何内容都不会重新渲染或以任何方式触及。#list
存在。我认为这是一种更清洁的解决方案,并将模板细节与视图逻辑分开。
this.template
,然后再将其更改回来,您可以将其命名为this.partialTemplate
或其他任何名称,或者只使用本地变量即可。 - jevakallio#list
是html
中的顶级选择器,则此方法将无效,因为$(selector,html)
等同于$(html).find(selector)
,它只会匹配匹配项集合的后代元素(其中#list
将是其中之一)。因此,在这种情况下,您必须使用filter
。 - Josh Leitzel