将 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 字符串如下所示：MyBrand™ is very<\b> nice <\p>

找到这个问题后：

Converting HTML Entities from JSON to String

我的字符串看起来像这样：MyBrand™ 非常<\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-Tree！但是当我想 return 它到组件时，浏览器呈现： [object HTMLParagraphElement] 而不是将 DOM 附加到我的元素。

我错过了什么？感谢您的帮助！

Answer 1

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

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

两个旁白：

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

将 HTML 标签从 JSON 字符串转换为真正的 HTML 元素

Converting HTML tags from JSON-String into real HTML Elements

javascript

json

html-parsing

polymer

web-component