9

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

4

1 回答 1

20

是的，这是可能的。最简单的方法是像渲染完整视图时一样执行整个模板，但只替换视图中您需要的部分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。我相信这是一个更干净的解决方案，并将您的模板详细信息与您的视图逻辑分开。

于 2013-01-31T10:35:50.680 回答