dart - 绑定(bind)包含html标签的内容

Question

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

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

Answer 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 中讨论的 Sanitization。 .