1

如何显示包含 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>";
}

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

4

2 回答 2

4

正如您所提到的，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 解析器是它们要受到 Sanitization 的影响，如本重大更改中所讨论的那样。

于 2013-10-11T17:42:35.790 回答
2

这是在 web-ui 中，但在聚合物中尚不支持，因此在polymer.dart中也不支持。邮件列表中的想法是创建一个 safe-html 元素：

<safehtml>{{bindSafeHtmlHere}}</safehtml>
于 2013-10-11T14:31:39.890 回答