javascript - 使用 Polymer 函数附加到 div

Question

我有一个连接到 Firebase 数据库的聚合物 Web 应用程序。我已成功在数据库中存储和检索数据。我试图在 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 中。非常感谢所有帮助，提前致谢。

Answer 1

我在这个问题上操之过急。您必须使用函数 document.createElement() ，然后将其附加到您想要的父 View ，如下所示:

这是我的 _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);
                    });
                });
            }

抱歉，如果这是重复的，但这里有相同问题的其他人可以解决。