Javascript 聚合物2.0数据绑定阵列

我试图显示我存储在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\u列表中。在查询之外，我将我的
this.candidates
设置为数组
var candidate\u列表

以下是我的模板的代码：

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

然后我的构造器：

constructor() {
    super();
  }

我尝试将其添加到构造函数中，但似乎没有任何影响：

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

结果应该是模板dom中的卡片会重复显示所有候选对象。相反，我什么也没看到。
但是当我
console.log
时，我可以看到我所有的候选人

我不确定调用您的
\u checkParties
的位置，但听起来Polymer好像不知道您更新了候选
数组

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

this.candidates = candidate_list;

你会的

this.set('candidates', candidate_list);

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

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

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

return candidate_list;

而不是上面提到的同一行。
谢谢你的回答！我确实试过
this.set（）
，但是
this
没有被识别出来。我能够通过在循环外执行
var self=this
来解决问题。不过我还没试过。哪一种性能更好
computed
或
this.set
？@Mikebarson所以你是说你用set方法让它工作了？顺便说一句，如果你同意使用ES6，你可以使用箭头函数语法来避免绑定
this
关键字，这样你就不需要在另一个变量中“缓存”你的作用域；当谈到使用set方法设置列表与使用观察器设置列表的性能差异时，我不知道是否存在任何差异，使用computed属性是有意义的，因为这就是这里实际发生的情况。但是我想你可以用哪种方法最适合你。是的，我用的是集合法。所以在性能上没有区别，好吧。你能澄清什么是ES6语法吗？我对ES6的整个系统都很陌生。是像这样的吗<代码>函数（）=>

？ES6是对JavaScript语言的一组更新，提供了许多新特性和语法优势。其中一个是arrow函数，您可以在这里看到描述：其中有一个段落“NoBinding of this”，解释了为什么这是一个备选方案。但是您应该决定是否要使用ES6语法，因为它还不是所有浏览器都支持的。通常只有当人们决定只支持现代浏览器或保存运行transpiler的构建过程时，才会使用它。谢谢！接受这个答案。

return candidate_list;