html - 在 Polymer 中使用重复模板时禁用数据绑定(bind)中的转义 HTML

Question

大家好，

        <template repeat="{{amendment in amendments}}">
            <div layout horizontal>
              <div>{{amendment['proposed_text']}}</div>
              <div>{{amendment['amendment_text'])}</div>
            </div>
        </template>

proposed_text和 amendment_text包含 HTML 内容，例如 <br> .由于 Polymer 在使用数据绑定(bind)时会转义所有 HTML 内容，因此这些 <br>标签未显示。我在谷歌上搜索了一会儿并想出了 injectBoundHTML(expression, element)然而，这对我也不起作用，因为我没有单个元素，而是由 repeat 创建的 N 个元素。模板。

您可能猜到我的问题是，我怎样才能制作这些 <br>或在使用 repeat 的情况下通常可见的 HTML模板自 injectBoundHTML似乎在这里不起作用？

我目前使用的解决方案适用于我的情况，但如果 HTML 内容包含的不仅仅是 <br> 则将无效。 .

我目前的解决方案:

        <template repeat="{{amendment in amendments}}">
            <div layout horizontal>
              <div>
                <template repeat="{{text in splitAtBrs(amendment['proposed_text'])}}">
                  {{text}}<br>
                </template>
              </div>
              <div>
                <template repeat="{{text in splitAtBrs(amendment['amendment_text'])}}">
                  {{text}}<br>
                </template>
              </div>
            </div>
        </template>

使用方法splitAtBrs :

 List<String> splitAtBrs(String s) {
    return s.split("\n");
  }

Answer 1

查看我上面的问题并查看 Answer #1和 Answer #2特别是Answer #3 .在答案 #3 中，他们使用:

. Dart :

String text = 'test<br/>foobar<br/><b>test</b>';
[...]
// somewhere in your code (e.g. in attached)
this.injectBoundHtml('xyz: ${text}', element: $['raw']);

.html:

<div id="raw"></div>

也许您也可以将其用于模板重复，例如如果您创建自己的函数，它将为您调用 injectBoundHTML。

像这样的东西会起作用:

int i = 0;
texts.forEach((String text) {
  this.injectBoundHtml('${text}', element: $['raw-${i}']);
  i++;
});

在 .html 中:

<template repeat="{{text in texts | enumerate}}">
  <div id="raw-{{text.index}}">{{text.index}}</div>
</template>