Handlebars.js: вложенные шаблоны лишают «безопасного» HTML - PullRequest
7 голосов
/ 27 февраля 2012

Я пытаюсь визуализировать набор данных с высокой степенью изменчивости, используя серию вложенных шаблонов Handlebars, и полученный результат полностью лишен HTML-тегов, несмотря на использование 'triple-stash' и возвращение SafeString.

У меня есть данные, которые похожи на:

{
  "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, хотя:
1. мы используем тройную шкатулку
2. мы возвращаем содержимое в Handlebars.SafeStringобъект
3. если вывести html на консоль перед возвратом, я вижу HTML-код, как и ожидалось

Очевидно, , этот пример может быть значительно упрощен.Однако в нашем случае использования этот тип обработки требуется из-за характера данных и требований к отрисовке.

Кстати, помощник renderCompanyDetails создает HTML-код в помощнике.Если я попытаюсь передать данные из помощника в третий шаблон и вернуть ТО, HTML полностью удаляется даже до того, как я его отредактирую ...

1 Ответ

5 голосов
/ 02 августа 2012

Вы не показываете источник для renderPersonDetails, но я бы поспорил, что он просто возвращает строку вместо Handlebars.SafeString.

Пример реализации - вместо этого:

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

  return output;
});

сделать это:

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

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