将 HTML 标签从 JSON-String 转换为真正的 HTML 元素

Question

我创建了一个自定义元素，它从 JSON 文件中获取数据：

<polymer-element name="view-component" attributes="number">
<template>
    <link rel="stylesheet" href="custom_style.css" type="text/css">

    <core-ajax auto
    response="{{data}}"
    on-core-response="{{ajaxHandler}}"

    url="http://www.test.com/json/{{number}}"; 

    handleAs="json"></core-ajax>

    <div class="showbox">

    <p><b>entry:</b> {{data.entry| encodeEntities}}</p>
 </template>

data.entry 字符串如下所示：<p>MyBrand™ is <b>very<\b> nice <\p>

找到这个问题后：

Converting HTML Entities from JSON to String

我的字符串如下所示：<p>MyBrand™ 是 <b>very<\b> nice <\p>

但是如何解析该字符串中的实际元素并将它们添加到我的自定义元素中？

到目前为止，这是我的 JavaScript 代码：

Polymer('view-component', {

  encodeEntities: function(value) {

    console.log(value);
    var div = document.createElement('div');
    div.innerHTML = value;
    console.log(div.childNodes[0]);
    return div.innerHTML;

  },

我的控制台日志console.log(div.childNodes[0]); 输出了一个看起来很完美的DOM 树！ 但是当我想将它返回给组件时，浏览器会呈现：[object HTMLParagraphElement] 而不是将 DOM 附加到我的元素。

我错过了什么？任何帮助表示赞赏！

Answer 1

出于安全考虑，Polymer 默认会转义注入的数据。 （见Advanced Topics – Data Binding）。因此，您将不得不使用injectBoundHtml 方法。为此，您应该为您的 <p> 标签提供一个 id 并使用 injectBoundHtml 添加内容，例如在 ready 回调中：

Polymer({
  ready: function() {
    this.injectBoundHTML('<b>entry:</b> {{data.entry}}', 
                         this.$.your_paragraph_id);
  }
});

两个旁白：

1. 如果您将脚本包含在<polymer-element> 标记中，则无需在Polymer() 调用中指定元素的名称。
2. 我认为您缺少 data 属性的声明，除非您已将其放在发布对象或其他内容中。