Handlebars.js：嵌套模板剥离“安全” HTML [英] Handlebars.js: Nested templates strip "safe" HTML

问题描述

我试图使用一系列嵌套的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+} 
] 
} 
] 
} 
  

，我有几个这样的模板：

$ b

 < template id = personDetails > 
< ul> 
 {{{renderPersonDetails details}}} 
< / ul> 
< / template> 
 
< template id =companyDetails> 
< ol> 
 {{{renderCompanyDetails details}}} 
< / ol> 
< / template> 
  

我将整个对象传递到第一个模板中。在模板中，我将'details'集合传递给注册助手：renderPersonDetails。
前两个元素很简单，并以两个LI元素的形式返回。当我们点击具有details属性的第三个元素时，我将这个对象传递给了companyDetails模板，而这个模板又将传递给将详细信息收集到renderCompanyDetails帮助程序。
$ b

renderCompanyDetails帮助程序的结果完全没有HTML，即使：
1.我们'重新使用三重存储

2.我们返回Handlebars.SafeString对象中的内容

3.如果在返回之前将html输出到控制台，我会看到如预期的HTML

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

顺便提一句，renderCompanyDetails助手在助手中构造HTML。如果我尝试从helper传递数据到第三个模板，并返回THAT，甚至在我渲染它之前，HTML会被完全剥离...

>解决方案

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

示例实现 - 不是这样：

  Handlebars.registerHelper（'renderPersonDetails'，function（data）{
 var output = ...; 
 
 return output; 
}）; 
  

执行此操作：

  Handlebars.registerHelper（'renderPersonDetails'，function（data）{
 var output = ...; 
 
 return new Handlebars.SafeString（output）; 
}）; 
  

I'm trying to render a highly variable set of data using a series of nested Handlebars templates and the result that is coming out is completely stripped of HTML tags, despite using a 'triple-stash' and returning a SafeString.

I have data that looks similar to:

{
  "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+"}
      ]
    }
  ]
}

and I have a couple templates like this:

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

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

I pass the entire object into the first template. In the template, I pass the 'details' collection to a registered helper: "renderPersonDetails". The first two elements are simple and are returned as two LI elements. These come out fine.

When we hit the third element that has a "details" property, I pass this object to the companyDetails template, which in turn, will pass the "details" collection to the renderCompanyDetails helper.

The results of the renderCompanyDetails helper are completely stripped of HTML, even though:
1. we're using a triple-stash
2. we're returning the content in a Handlebars.SafeString object
3. if I output the html to the console before returning, I see the HTML as expected

Obviously this example can be simplified dramatically. Our use case, however, requires this type of processing due to the nature of the data and the rendering requirements.

Incidentally, the renderCompanyDetails helper constructs the HTML in the helper. If I try to pass the data from the helper to a third template, and return THAT, the HTML is completely stripped even before I render it...

解决方案

You're not showing the source for renderPersonDetails, but I would bet that it's just returning a string, instead of a Handlebars.SafeString.

Example implementation -- instead of this:

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

  return output;
});

do this:

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

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

这篇关于Handlebars.js：嵌套模板剥离“安全” HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！