Polymer 2.0 数据绑定数组

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;
  }

基本上，我从我的 firebase 查询该路径的子节点，然后将它们附加到我的 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;

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