綁定包含內容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簡單地顯示爲一個字符串，它沒有具體的元素，甚至標記。然而，我們可以做的就是在我們的觀察值被改變時自動調用一個函數。在回調中，我們創建一個基於字符串內容的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中所述。

Answer 2

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

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