Handlebars.js：嵌套模板去除“安全”HTML答案

【问题标题】：Handlebars.js: Nested templates strip "safe" HTMLHandlebars.js：嵌套模板去除“安全”HTML
【发布时间】：2012-02-26 21:58:55
【问题描述】：

我正在尝试使用一系列嵌套的 Handlebars 模板来呈现一组高度可变的数据，尽管使用了“三重存储”并返回了 SafeString，但出来的结果完全没有 HTML 标记。

我的数据类似于：

{
  "type": "person",
  "details": [
    {"name": "firstname", "value": "joe"},
    {"name": "lastname", "value": "smith"},
    {
      "name": "company",
      "value": "acme",
      "details": [
        {"name": "address", "value": "123 Main St; Somewhere, CA"},
        {"name": "employees", "value": "10+"}
      ]
    }
  ]
}

我有几个这样的模板：

<template id="personDetails">
  <ul>
    {{{renderPersonDetails details}}}
  </ul> 
</template>

<template id="companyDetails">
  <ol>
    {{{renderCompanyDetails details}}}
  </ol> 
</template>

我将整个对象传递给第一个模板。在模板中，我将“详细信息”集合传递给已注册的助手：“renderPersonDetails”。前两个元素很简单，并作为两个 LI 元素返回。这些结果很好。

当我们点击具有“details”属性的第三个元素时，我将此对象传递给 companyDetails 模板，该模板又将“details”集合传递给 renderCompanyDetails 帮助器。

renderCompanyDetails 帮助器的结果完全去除了 HTML，即使：
1. 我们正在使用三重存储
2. 我们在 Handlebars.SafeString 对象中返回内容
3.如果我在返回之前将html输出到控制台，我会看到预期的HTML

显然 这个例子可以大大简化。然而，由于数据的性质和渲染要求，我们的用例需要这种类型的处理。

顺便说一句，renderCompanyDetails 帮助器在帮助器中构造 HTML。如果我尝试将数据从帮助程序传递到 third 模板，然后返回 THAT，那么 HTML 甚至在我渲染它之前就被完全剥离了......

【问题讨论】：

您不希望<li> 标记驻留在模板中吗？在帮助程序中连接 HTML 字符串会破坏拥有模板的目的，不是吗？
顺便说一句，你能在 jsFiddle 上做一个演示吗？另外，你能发布帮助函数的代码吗？
嗨。是的，我猜这个例子过于简单化了。 companyDetails 模板实际上呈现了您可以猜到的列表项。我没有在模板中使用“#each”，因为某些元素的数据依赖于其他元素。我会尝试在 jsfiddle 上运行一些东西。以前没用过:)
当我没有正确地将模板包装在脚本中时，我偶然发现了这个“消失”的 html... 删除了错位的 DOM 元素，例如和不在中，等

标签： templates handlebars.js

【解决方案1】：

您没有显示renderPersonDetails 的来源，但我敢打赌它只是返回一个字符串，而不是Handlebars.SafeString。

示例实现 -- 而不是这个：

Handlebars.registerHelper('renderPersonDetails', function(data){
  var output = ...;

  return output;
});

这样做：

Handlebars.registerHelper('renderPersonDetails', function(data){
  var output = ...;

  return new Handlebars.SafeString(output);
});

【讨论】：