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

问题描述

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

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

  @CustomTag -element）
 class MyElement extends PolymerElement {
 @observable string mylongtext =bla bla< br> bla bla< strong> bla< / strong& 
} 
  

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

解决方案

正如你所说， mylongtext 只是显示为字符串，它不是一个元素，向上。然而，我们可以做的是在我们的observable被改变的任何时候自动调用一个函数。在回调中，我们创建了一个基于字符串内容的 DocumentFragment ，然后将其插入到我们的div容器中。

 < polymer-element name =my-element > 
< template> 
< div id =container> 
 
< / div> 
< / template> 
< script ...>< / script> 
< / polymer-element> 
  

  @CustomTag -element）
 class MyElement extends PolymerElement {
 @observable string mylongtext =bla bla< br> bla bla< strong> bla< / strong& 
 
 MyElement（）{
 //绑定属性更改为mylongtext可见字符串和
 onPropertyChange（this，#mylongtext，addFragment）; 
} 
 
 //插入时需要做，以确保我们添加初始值。 
 void inserted（）{
 super.inserted（）; 
 addFragment（）; 
} 
 
 void addFragment（）{
 var df = new DocumentFragment.html（mylongtext）; 
 //在清除容器中的任何内容并添加新的片段
 $ ['container']。nodes..clear（）.. add（df）; 
} 
 
} 
  

请注意， onPropertyChange 和 $ [..] 自动节点查找需要Polymer dart 0.8.0或更高版本（在以前的版本中分别是 bindProperty 和 shadowRoot.query（..） / p>

但是要记住的一点是，使用 DocumentFragment.html（）和其他类似的字符串 - html解析器是他们受到Sanitization的讨论在这个突破性变化。

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屋！