从 Firebase 检索数据到 Polymer 元素

Question

我无法将数据从 firebase 获取到聚合物元素。

这是我的代码：

 <dom-module id="bb-account-settings">

  <template>

    <style is="custom-style" include="shared-styles"></style>

                <div class="settings-dialog">
                    <div class="frame">
                        <div class="horizontal layout">
                            <div>
                                <div class="user-image"></div>
                            </div>
                            <div class="horizontal layout">
                                <paper-input label="First Name" value="{{fNameSet}}"></paper-input>
                                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                <paper-input label="Last Name" value="{{lNameSet}}"></paper-input>
                            </div>
                            <paper-input label="Email" value="{{emailSet}}"></paper-input>
                        </div>
                        <paper-input label="Phone number" value="{{phoneSet}}" allowed-pattern="[0-9]"></paper-input>
                    </div>
                </div>

  </template>
  <script>

    Polymer({

      is: 'bb-account-settings',

            properties: {
                fNameSet: {
                    type: String,
                    value: function() {
                        var userId = firebase.auth().currentUser.uid;
                        firebase.database().ref('/user/' + userId + '/UserInfo').once('value').then(function(snapshot) {
                            console.log(snapshot.val().fName)
                            return (snapshot.val().fName);
                        });
                    }
                },
                lNameSet: {
                    type: String,
                    value: 'test last name'
                    }
                }
            }

    });

  </script>

lNameSEst 是 'test last name' 并且显然它被放入了它的输入字段。你很希望 fNameSet 做同样的事情，但不是。当我打印它时 (console.log) 它说 'test first name' 但它没有显示在它的输入字段中！

我很困惑。

Answer 1

正如其中一位评论者所注意到的，在回调中返回一个值是问题所在。您传递给 firebase 的 "once" 函数的函数被异步调用并在不同的范围内调用，因此基本上它失去了与您声明它的位置的关系并且您返回的值不会到达您期望的位置。

获得所需内容的一种有点蛮力的方法是执行以下操作：

ready: function() {
    var userId = firebase.auth().currentUser.uid;
    firebase.database().ref('/user/' + userId + '/UserInfo').once('value').then(function(snapshot) {
          console.log(snapshot.val().fName)
          this.fNameSet = snapshot.val().fName;
        }.bind(this));
}

还有更优雅的方法，但这有点超出了这个问题的范围，需要重新构建和更深入地了解您的应用程序的结构。

从 Firebase 检索数据到 Polymer 元素

Retrieve data from Firebase to Polymer element

javascript

firebase

polymer

firebase-realtime-database

polymer-1.0