重新渲染把手部分骨干从视图 [英] Re-Rendering Handlebars partial from backbone view

问题描述

我有一个观点，持​​有车把模板。
该模板由另一部分模板。
该局部模板保存结果，我用我的应用程序的不同部分的列表。
总之，想筛选结果时，我想只渲染部分。这意味着骨干观点不应使整个视图仅仅是局部的。
能不能做到？

I have a view, which holds handlebars template. that template consist of another partial template. that partial template holds a list of results, which i am using in different parts of my app. anyhow, when trying to filter the results, i'd like to render only that part. meaning the backbone view should not render the whole view just the partial. can it be done?

推荐答案

是的，这是可能的。最简单的方法就是你做渲染完整视图时执行整个模板，但只能更换你需要的部分视图的报。

Yes, it's possible. The easiest way is to execute the whole template as you do when rendering the complete view, but only replace the the part you need in the view's 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（）替换名单后视图的事件才能正常工作。

Depending on how dynamic your template is, you may have to call this.delegateEvents() after replacing the list for the view's events to work correctly.

基于评论编辑：

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

To clarify, the method I propose here does execute the view's main handlebars template again, but it doesn't render the whole view again.

一步一步：

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

1. Execute the Handlebars template function as you do in normal render.

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

变量 HTML 现在包含HTML标记的字符串。一切都还没有被渲染。

The variable html now contains a string of HTML markup. Nothing has yet been rendered.

定义的元素，你想重新渲染的选择。

Define a selector for the element, which you would like to re-render.

var selector = "#list";

查找的DOM元素来代替。您已经呈现的观点，一旦这presumes。否则会出现内没有 #list 元素这一点。$埃尔。

this.$el.find(selector)

查找模板化HTML字符串对应的元素，并替换现有的元素新的：

Find the corresponding element in the templated html string, and replace the existing element with the new one:

.replaceWith($(selector, html));

这只会替换 #list 元素，这是目前在页面上。外 #list 什么也不会重新呈现或以任何方式感动。

This will only replace the #list element that's currently on the page. Anything outside #list will not be re-rendered or touched in any way.

主要的原因我建议你这样子，而不是执行，并分别呈现局部模板这么做是的您的观点并不需要了解模板的实施细节和模板引擎任何。它所需要知道有一个元素 #list 。我相信这是一个更清洁的解决方案，并保持你的模板的详细信息从视图逻辑中分离出来。

The main reason I propose you do it this way instead of executing and rendering the partial template separately is that your view doesn't need to know anything about the implementation details of the template and the templating engine. All it needs to know that there is an element #list. I believe this is a cleaner solution, and keeps your template details separate from your view logic.

这篇关于重新渲染把手部分骨干从视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！