Question

我试图显示我存储在Firebase数据库中的相应各方下的所有候选人的列表。我正在使用Polymer 2.0 Starter-Kit。

以下是代码：

_checkParties() {
      var candidate_list = []
      firebase.database().ref("/candidates/"+this.party.$key).once("value", function(snapshot) {
          snapshot.forEach(function(snap) {
              var data = {"key": snap.key, "data": snap.val()}

              var results = Object.keys(data["data"]).map(function(key) {
                return {
                    name: key,
                    value: data["data"][key],
                    key: data["key"]
                };
              })
              candidate_list.push(results[0])
          })
      })
      this.candidates = candidate_list;
  }

基本上我从我的火力基地查询该路径的孩子，然后将它们附加到我的var candidate_list。在查询之外，我将this.candidates设置为数组var candidate_list。

这是我模板的代码：

<template is="dom-repeat" items="{{ candidates }}" as="candidate">
      <div class="card">
          <p>[[candidates]]</p>
          <h3>[[candidate.name]] - [[candidate.value]]</h3>
          <paper-button raised style="color: yellow; background-color: black;" on-tap="_castVote">Vote</paper-button>
      </div>
  </template>

我的静态属性的代码：

candidates: {
            type: Array,
            value: []
          }

然后我的构造函数：

constructor() {
    super();
  }

我尝试将此添加到我的构造函数中，但它似乎不会影响任何内容：

constructor() {
    super();
    this.candidates = [];
  }

结果应该是我模板中的牌dom-repeat显示所有候选人。相反，我没有得到任何东西。但是当我console.log时，我可以看到所有候选人。

Answer 1

我不确定您的_checkParties被调用的位置，但听起来像Polymer不知道您更新了候选人array。

我认为第一次尝试可能是使用set方法，以确保已通知更新，如here所述。这意味着要替换方法中的最后一个语句。而不是

this.candidates = candidate_list;

你会有

this.set('candidates', candidate_list);

另一种选择，似乎非常适合你正在做的事情，就是将候选人列表作为计算属性。因此，您只需将'computed'键添加到属性定义中：

candidates: {
    type: Array,
    value: [],
    computed: '_checkParties(candidatesResponse)',
}

并且在您的方法中，您必须返回列表，而不是覆盖属性，所以

return candidate_list;

而不是上面提到的同一行。

Polymer 2.0数据绑定阵列

1 个答案: