javascript - Polymer 从 firebase 实时数据库更新 javascript 数组

Question

我有一个 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)
      });

    }
  }

我只是将项目数组放入网格中

<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 已填充。虽然没有显示在网格中。请让我知道我做错了什么。谢谢

Answer 1

this.items 只是设置值，但如果您希望它实际通知 dom-repeat 有关更改(或任何类型的 polymer 元素)的信息，则必须使用 this.set('items', items)。 this.set() 向所有 polymer 元素(例如 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()