绑定包含内容html标签

问题描述：

如何显示内容包含HTML标记像<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>"; 
}

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

答

至于你提到，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和$[..]自动节点的发现需要聚合物镖0.8.0或更高（在以前的版本是bindProperty和分别使用shadowRoot.query(..)）。

但有一点需要注意的是，使用DocumentFragment.html()和其他类似的字符串到html解析器是，它们受到消毒处理，如this breaking change中所述。

这仍然是一样的。我创建了这样一个元素的Polymer 1.0版本。源代码可以在''的[GitHub repo]（https://github.com/bwu-dart/bwu_bind_html） –

答

这是在web-ui中，但是not yet supported在polymer中，因此也不在polymer.dart中。从the mailing list想法是建立一个安全的，html元素：

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

绑定包含内容html标签

相关推荐