使用 Polymer 函数附加到 div答案

【问题标题】：Appending to div using Polymer function使用 Polymer 函数附加到 div
【发布时间】：2016-06-30 23:50:02
【问题描述】：

我有一个连接到 firebase 数据库的聚合物网络应用程序。我已经成功地在我的数据库中存储和检索数据。我试图在 Firebase forEach() 方法期间将 div 附加到 dom 模块，同时从数据库中解析我的 JSON 数据。虽然我收到了这个错误，但我不确定如何附加到我的 html 代码中。

错误消息说：“用户回调引发了异常。TypeError：无法在'Node'上执行'appendChild'：参数1不是'Node'类型。”

这是抛出错误的行：

Polymer.dom(container).appendChild('<div class="card">' + data.name + '</div>');

以下是其余代码，以提供更多关于我试图通过此实现的目标的上下文：

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="my-list-view1">

    <template>
        <style>

            .cardContainer {
            }

            .card {
                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
                padding-bottom: 16px;
                margin: 24px;
                border-radius: 5px;
                background-color: #fff;
                color: #757575;
            }

        </style>
        <div id="cardContainer">
            <paper-fab icon="arrow-forward" on-click="_loadJson"></paper-fab>
        </div>


    </template>
    <script>
        Polymer ({
            is: 'my-list-view1',
            _loadJson: function() {
                var ref = new Firebase("https://firebaseurl.com/entries");
                var container = this.$.cardContainer;
                ref.on("value", function(snapshot) {
                    snapshot.forEach(function(childSnapshot) {
                        var data = childSnapshot.val();
                        console.log(data.name + " " + data.phone);
                        Polymer.dom(container).appendChild('<div class="card">' + data.name + '</div>'); //error here
                    });
                });
            }
        })

    </script>

</dom-module>

数据被完美检索，我可以解析 JSON 对象，但我不确定一旦我有数据如何附加到这个 dom 模块。我真的想将每个 json 对象的 div 添加到名为 cardContainer 的 div 中。非常感谢所有帮助，在此先感谢。

【问题讨论】：

标签： javascript json firebase polymer-1.0 firebase-realtime-database

【解决方案1】：

我在这个问题上开枪了。您必须使用函数 document.createElement() ，然后将其附加到您想要的父视图中：

这是我的 _loadJson 函数：

_loadJson: 函数() {

var ref = new Firebase("https://firebaseurl.com/entries");
                var container = this.$.cardContainer;
                ref.on("value", function(snapshot) {
                    snapshot.forEach(function(childSnapshot) {
                        var data = childSnapshot.val();
                        console.log(data.name + " " + data.phone);
                        var card = document.createElement('div');
                        card.className = "card";
                        card.innerHTML = data.name + ", " + data.phone;
                        Polymer.dom(container).appendChild(card);
                    });
                });
            }

对不起，如果这是重复的，但这里有相同问题的其他人是解决方案。

【讨论】：