绑定包含html标签的内容答案

【问题标题】：Bind content containing html tags绑定包含html标签的内容
【发布时间】：2013-10-11 10:48:02
【问题描述】：

如何在聚合物元素中显示包含 html 标签（如 <br>）的内容，如：

<polymer-element name="my-element">
  <template>
    {{mylongtext}}
  </template>
<script ...></script>
</polymer-element>

@CustomTag("my-element")
class MyElement extends PolymerElement {
  @observable string mylongtext = "bla bla <br> bla bla <strong> bla </strong>";
}

目前这些标签显示为文本。

【问题讨论】：

标签： dart dart-polymer

【解决方案1】：

正如您提到的，mylongtext 只是显示为一个字符串，它不是特定的元素，甚至不是标记。然而，我们可以做的是在我们的 observable 发生变化时自动调用一个函数。在回调中，我们根据字符串的内容创建一个DocumentFragment，然后将其插入到我们的 div 容器中。

<polymer-element name="my-element">
  <template>
    <div id="container">

    </div>
  </template>
<script ...></script>
</polymer-element>

@CustomTag("my-element")
class MyElement extends PolymerElement {
  @observable string mylongtext = "bla bla <br> bla bla <strong> bla </strong>";

  MyElement() {
    // Bind property changes to the mylongtext observable string and 
    onPropertyChange(this, #mylongtext, addFragment);
  }

  // Need to do it on inserted to ensure we add the initial value.
  void inserted() {
    super.inserted();
    addFragment();
  }

  void addFragment() {
    var df = new DocumentFragment.html(mylongtext);
    // In the clear any contents from container and add new fragment
    $['container'].nodes..clear()..add(df);
  }

}

请注意，onPropertyChange 和 $[..] 自动节点查找需要 Polymer dart 0.8.0 或更高版本（在以前的版本中，它是 bindProperty 并分别使用 shadowRoot.query(..)）。

但要记住的一点是，使用 DocumentFragment.html() 和其他类似的 string-to-html 解析器会受到 this breaking change 中讨论的清理。

【讨论】：

这仍然有效。我创建了这样一个元素的 Polymer 1.0 版本。源代码在GitHub repo 的<bwu-bind-html> 中提供

【解决方案2】：

这是在 web-ui 中，但在 polymer 中是 not yet supported，因此在 polymer.dart 中也不是。 the mailing list 的想法是创建一个 safe-html 元素：

<safehtml>{{bindSafeHtmlHere}}</safehtml>

【讨论】：