javascript - Polymer 2.0 数据绑定(bind)阵列

Question

我正在尝试显示我存储在 Firebase 数据库中的相应政党下的所有候选人的列表。我正在使用 Polymer 2.0 入门套件。

代码如下:

_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 Candidates_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 并不知道您更新了候选数组。

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

this.candidates = candidate_list;

你会有

this.set('candidates', candidate_list);

另一个选项，似乎非常适合您正在做的事情，是将候选列表作为计算属性。因此，您只需将 'compulated' 键添加到属性定义中即可:

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

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

return candidate_list;

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