在 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 and Answer #2 and especially Answer #3。在答案 #3 中，他们使用：

.飞镖:

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>

在 Polymer 中使用重复模板时禁用数据绑定中的转义 HTML

Disable escaping HTML in data-binding when using repeat-templates in Polymer

html

data-binding

dart

polymer