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>

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

到目前为止，这是我的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方法。为此，您应该为代码添加ID，并使用injectBoundHtml添加内容，例如ready回调：

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

两个旁白：

如果您将脚本包含在Polymer()标记内，则无需在<polymer-element>调用中指定元素的名称。
我认为你错过了data属性的声明，除非你把它放在发布对象中。

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

1 个答案: