Question

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

<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>";
}

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

Answer 1

正如您所提到的，mylongtext只是显示为字符串，它不是特定的元素，甚至是标记。但是，我们可以做的是在我们的可观察量发生变化时自动调用函数。在回调中，我们创建一个基于字符串内容的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()和其他类似的字符串到html解析器是因为this breaking change中讨论过它们需要进行清理。

Answer 2

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

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

绑定包含html标记的内容

2 个答案: