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 просто отображается в виде строки, это не конкретно элемент или даже пометок. Однако то, что мы можем сделать, автоматически вызывает функцию в любое время, когда изменяется наше наблюдаемое. В обратном вызове мы создаем 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

Это было в Интернете, но not yet supported в polymer и, следовательно, не в polymer.dart еще. Идея от the mailing list было создание безопасной HTML элемент:

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