Handlebars.js:嵌套模板剥离"安全"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>

我将整个对象传递给第一个模板.在模板中,我将'details'集合传递给已注册的帮助程序:"renderPersonDetails".前两个元素很简单,并作为两个LI元素返回.这些都很好.

当我们打的是有一个"细节"属性中的第三个要素,我把这个对象传递给companyDetails模板,这反过来,将通过"详细信息"收集到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);
});