Question

我正在尝试使用一系列嵌套的Handlebars模板呈现高度可变的数据集，并且即使使用“三重存储”并返回SafeString，结果也会完全剥离HTML标记。 / p>

我的数据类似于：

{
  "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元素返回。结果很好。

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

renderCompanyDetails助手的结果完全被剥夺了HTML，即使：我们正在使用三重扫描 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);
});

Handlebars.js：嵌套模板剥离“安全”HTML

1 个答案: