绑定包含 html 标签的内容 [英] Bind content containing html tags

问题描述

如何在聚合物元素中显示包含像 <br> 这样的 html 标签的内容，例如:

<模板>{{mylongtext}}<脚本...></脚本></聚合物元素>

@CustomTag("my-element")类 MyElement 扩展了 PolymerElement {@observable string mylongtext = "bla bla 
 bla bla  bla ";}

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

解决方案

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

<模板><div id="容器">

<脚本...></脚本></聚合物元素>

@CustomTag("my-element")类 MyElement 扩展了 PolymerElement {@observable string mylongtext = "bla bla 
 bla bla  bla ";我的元素(){//将属性更改绑定到 mylongtext 可观察字符串和onPropertyChange(this, #mylongtext, addFragment);}//需要在插入时执行它以确保我们添加初始值.无效插入(){超级插入()；添加片段()；}无效添加片段(){var df = new DocumentFragment.html(mylongtext);//在清除容器中的任何内容并添加新片段$['容器'].nodes..clear()..add(df);}}

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

但是要记住的一件事是，使用 DocumentFragment.html() 和其他类似的 string-to-html 解析器会受到 这一重大变化.

How can I display content containing html tags like <br> inside a polymer-element like:

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

Currently those tags are shown as text.

解决方案

As you mention, mylongtext is simply displayed as a string, it's not specifically an element or even mark up. However what we can do is automatically call a function any time that our observable is changed. In the callback we create a DocumentFragment which is based off of the contents of the string, and then insert that into our div container.

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

}

Note that onPropertyChange and the $[..] automatic node finding require Polymer dart 0.8.0 or higher (in previous versions it's bindProperty and using shadowRoot.query(..) respectively).

One thing to keep in mind however, is that using DocumentFragment.html() and other similar string-to-html parsers is that they are subject to Sanitization as discussed in this breaking change.

这篇关于绑定包含 html 标签的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！