绑定HTML而不是纯文本

Binding HTML rather than plain text

本文关键字：文本 HTML 绑定      更新时间：2023-09-26

如何在Polymer中包含HTML而不是纯文本?假设通过ajax检索到包含<i>和<strong>元素的字符串数组，并且希望用dom-repeat <template>(或<iron-list>，如我的特定场景中的情况)呈现这些字符串。如何做到这一点，使HTML呈现为实际的HTML?

绑定节点innerHTML属性的一种略显hack的方法:

<div inner-h-t-m-l="{{myProp}}"></div>

Polymer从连字符中推断出大写，将后面的字符转换成大写。

我发现最简单的方法是创建一个具有以下定义的元素<bind-html>:

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="bind-html">
  <template></template>
</dom-module>
<script>
  Polymer({
    is: 'bind-html',
    properties: {
      html: {
        type: String,
        observer: ["htmlChanged"]
      }
    },
    htmlChanged: function(value){
      Polymer.dom(this.root).innerHTML = value;
    }
  });
</script>

就像我发布这个一样，Zikes发布了另一个解决方案，所以我还没有研究哪一个最有效，但至少想在这里快速放下这个，以防它对某人有用。

感谢@Claies指出我没有足够仔细地阅读，并将我重新引导到一些聚合物0.5的讨论中，这对我有所帮助。

相关文章：