聚合物从 firebase 实时数据库更新 javascript 数组答案

【问题标题】：Polymer updating javascript array from firebase realtime database聚合物从 firebase 实时数据库更新 javascript 数组
【发布时间】：2017-07-06 06:47:20
【问题描述】：

我有一个 vaadin-grid，我想显示来自 firebase 数据库的数据列表。我知道根据文档，这种结构很丑陋，我应该为此创建另一个子树，但只想做一个概念证明。所以这里是代码：

ready() {
    var items = [];
    if (this.locationKey) {
      var territoryRef = firebase.database().ref('Territories').child(this.locationKey);
      var householdRef = firebase.database().ref('Households');
      var contactsRef = firebase.database().ref('Contacts');

      territoryRef.once('value').then((terrSnap) => {
        terrSnap.forEach((terrChildSnap) => {
          var territoryName = terrChildSnap.val().name;
          var territoryKey = terrChildSnap.key;

          householdRef.child(territoryKey).once('value').then((householdSnap) => {
            if (householdSnap.val()) {
              householdSnap.forEach((householdChildSnap) => {
                var household = householdChildSnap.val();
                var householdName = household.name;
                var householdKey = householdChildSnap.key;

                contactsRef.child(householdKey).once('value').then((contactsSnap) => {
                  if (contactsSnap.val()) {
                    contactsSnap.forEach((contactsChildSnap) => {
                      var contacts = contactsChildSnap.val();
                      var contactsName = contacts.name;
                      var contactsKey = contactsChildSnap.key;

                      items.push({ territory: territoryName, name: contactsName, household: householdName, nationality: contacts.nationality, language: contacts.language || "" });

                    })
                  }
                })
              })
            }
          })
        })
        this.items = items;
      }).catch((err) => {
        console.error(err)
      });

    }
  }

我只是将 items 数组放入网格中

<vaadin-grid id="grid" aria-label="Contacts Summary" items="[[items]]">
  <vaadin-grid-column width="50px" flex-grow="0">
    <template class="header">#</template>
    <template>[[index]]</template>
  </vaadin-grid-column>...

网格加载正常，但不显示数据。我可以确认 this.items 已填充。虽然没有显示在网格中。请让我知道我做错了什么。谢谢

【问题讨论】：

也许您可以使用set 方法override the dirty checking（这可能是问题所在）：this.set('items', items)。
谢谢.. 是的，我可以尝试文档中写的很多内容，并且设置部分有效，但问题是检测到发生了变化。我可以通过在 set 语句后记录来确认这一点。

标签： javascript arrays firebase firebase-realtime-database polymer

【解决方案1】：

this.items 只是设置值，但如果您希望它实际通知 dom-repeat 有关更改（或任何类型的聚合物元素），您必须使用 this.set('items', items)。 this.set() 向所有聚合物元素（例如 dom-repeat）发送变量已更改的事件。

我不熟悉 firebase.database() 但如果它自动更新，那么您需要改用 this.push('items', item) 。 dom-repeat 通常只有在您更改用于填充 dom-repeat 的数组长度时才会更新。

如果您想查看现有元素中特定属性的更新，则需要使用 this.set()，但请确保在替换更改的元素之前删除对原始数组 (this.items) 的所有引用。我通常用 var items = JSON.parse(JSON.stringify(this.items));而不仅仅是 var items = this.items。否则，Polymer 将对新更新的数组进行脏检查，发现没有值更新（因为 items 是对 this.items 的引用），因此不会更新 DOM。

另外，ready() 应该已经准备好了：function()

【讨论】：