Question

假设我有一个聚合物元素<polymer-element> <div id="foo"> {{html}} </div> </polymer-element>，其中html应该是HTML格式的字符串，例如<p>blah</p>，我想要的是，当html更改时，polymer-element也会改变，并使用html作为其innerHtml，即自动将字符串转换为元素并将其作为foo的子项插入。

聚合物/ polymer_expression可以为我做这个，或者我必须做一个querySelector（），然后手动将html设置为innerHtml？

Answer 1

我的解决方案是一个自定义元素，它扩展了div并使用DocumentFragment类通过数据绑定将HTML字符串解析为DOM。

来自我的Github gist

<!-- Polymer Dart element that allows HTML to be inserted into the DOM via data binding -->

<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="html-display" extends="div">
  <script type="application/dart">
    import 'dart:html';
    import 'package:polymer/polymer.dart';

    @CustomTag('html-display')
    class HtmlDisplay extends DivElement with Polymer, Observable {
      @published String htmlContent;

      // we need this stuff because we're extending <div> instead of PolymerElement
      factory HtmlDisplay() => new Element.tag('div', 'html-display');
      HtmlDisplay.created() : super.created() {
        polymerCreated();
      }

      @override void attached() {
        super.attached();
      }

      // respond to any change in the "htmlContent" attribute
      void htmlContentChanged(oldValue) {
        if (htmlContent == null) {
          htmlContent = "";
        }

        // creating a DocumentFragment allows for HTML parsing
        this.nodes..clear()..add(new DocumentFragment.html("$htmlContent"));
      }
    }
  </script>
</polymer-element>

<!--
Once you've imported the Polymer element's HTML file, you can use it from another Polymer element like so:

<link rel="import" href="html_display.html">

<div is="html-display" htmlContent="{{htmlString}}"></div>

*htmlString* can be something like "I <em>love</em> Polymer Dart!"
-->

Answer 2

我使用https://stackoverflow.com/a/20869025/789338中描述的解决方案。关键类是DocumentFragment。

Answer 3

官方的方法在文档中描述：https://www.polymer-project.org/docs/polymer/databinding-advanced.html#boundhtml

doc上的示例：

<polymer-element name="my-element">
  <template>
    <div id="message_area"></div>
  </template>
  <script>
    Polymer({
      message: 'hi there',
      ready: function() {
        this.injectBoundHTML('<b>{{message}}</b>', this.$.message_area);
      }
    });
  </script>
</polymer-element>

自动将html字符串转换为元素

3 个答案: