javascript - 将 HTML 标签从 JSON 字符串转换为真正的 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&trade; is <b>very<\b> nice <\p>

找到这个问题后:

Converting HTML Entities from JSON to String

我的字符串看起来像这样:<p> MyBrand™ 是 <b>非常<\b>不错<\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 默认转义注入(inject)的数据。 (参见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()中指定元素的名称。如果您将脚本包含在 <polymer-element> 中，请调用标签。
2. 我认为您缺少 data 的声明属性，除非您将其放入发布对象或其他内容中。