1

我正在开发一个聚合物应用程序，我需要从外部文件中获取一些 HTML 代码块并附加到活动文件中。我已经指定了要自己添加的内容。

下面是代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title></title>
    </head>

    <body>
        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="import" href="bower_components/polymer/polymer.html">

        <dom-module id="trail-app">
            <template>
                <style>
                </style>

                <button on-tap="loadContent">click</button>
                <button on-tap="showContent">show</button>

                <template is="dom-repeat" items='{{celsius}}'>
                    <div>[[item]]</div>
                </template>

                <div id="content"></div>

            </template> 

        <script>
                 Polymer({
                 is: "trail-app",

                 properties:{
                        celsius:{}
                 },

                 ready:function(){
                    this.celsius = ["36","37","38","39","40","41"];
                 },

                 loadContent:function(data){
                    document.getElementById("content").innerHTML = '<template is="dom-repeat" items="{{Celsius}}">'+
                    '<div>[[item]]</div>'+
                    '</template>';
                 },

                 showContent:function(){
                    console.log(document.getElementById("content").innerHTML);
                 },

            });
        </script> 
        </dom-module>
        <trail-app></trail-app>
 </body>
</html>

当我循环celsius使用 dom-repeat 时，它工作正常。但是如果使用document.getElementById("content").innerHTML它的给定添加相同的代码

Polymer::Attributes: 无法将数组解码为 JSON 警告。

如何解决这个问题。

4

1 回答 1

0

所以我已经使用模板器行为（https://www.polymer-project.org/1.0/docs/api/Polymer.Templatizer）解决了这样的动态内容。

要使用，只需在其中创建一个带有 dom-repeat 的普通模板。然后在您的 loadContent 方法中应用模板化，然后将模板标记到 DOM 中。

<template id="repeatTempl">
    <template is="dom-repeat" items="{{Celsius}}">
        <div>[[item]]</div>
    </template>
</template>

包括模板化行为：

behaviors: [Polymer.Templatizer]

然后您的 loadContent 方法将如下所示：

loadContent: function(data) {
    var templ = this.$.repeatTempl;
    this.templatize(templ);
    var elem = this.stamp({Celsius: data});
    Polymer.dom(this.$.content).appendChild(elem.root);
}
于 2017-03-21T22:30:04.807 回答