templates - Handlebars.js:嵌套模板去除 "safe"HTML

Question

我正在尝试使用一系列嵌套的 Handlebars 模板来呈现一组高度可变的数据，尽管使用了“triple-stash”并返回了 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。如果我尝试将数据从帮助程序传递到第三个模板，并返回 THAT，则 HTML 甚至在我呈现之前就被完全剥离了......

Answer 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);
});