Polymer 2.0数据绑定数组

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 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方法，以确保它被通知的更新，如所描述这里 。 因此，这将意味着替换该方法中的最后一条语句。 代替

this.candidates = candidate_list;

你将会拥有

this.set('candidates', candidate_list);

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

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

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

return candidate_list;

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