使用 Polymer 函数附加到 div

Question

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

错误消息说："Exception was thrown by user callback. TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type '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() 然后将其附加到您想要的父视图，如下所示：

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

抱歉，如果这是重复的，但这里有相同问题的任何其他人都是解决方案。

使用 Polymer 函数附加到 div

Appending to div using Polymer function

javascript

json

firebase

firebase-realtime-database

polymer-1.0