在 Polymer 中使用重复模板时，在数据绑定中禁用转义 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 在使用数据绑定时会转义所有 HTML 内容，因此不会显示这些 <br> 标签。我在 Google 上搜索了一段时间并想出了 injectBoundHTML(expression, element)，但这对我也不起作用，因为我没有单个元素，而是由 repeat 模板创建的 N 个元素。

您可能猜到我的问题是，如果使用repeat 模板，我怎样才能使这些<br> 或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>