[英]Polymer 2.0 Data-Binding Array
I'm trying to show the list of all the candidates under their corresponding parties I have stored in my Firebase database. 我正在尝试显示我存储在Firebase数据库中的所有对应候选人下的所有候选人的列表。 I am using Polymer 2.0 Starter-Kit.
我正在使用Polymer 2.0入门套件。
Here's the code: 这是代码:
_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;
}
Basically I'm querying from my firebase the children of that path, then appended them to my var candidate_list
. 基本上,我是从firebase中查询该路径的子级,然后将它们附加到
var candidate_list
。 Outside the query I then set my this.candidates
to the array var candidate_list
. 然后在查询之外,我将
this.candidates
设置为数组var candidate_list
。
Here's the code to my template: 这是我模板的代码:
<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>
The code to my static properties: 该代码为我的静态属性:
candidates: {
type: Array,
value: []
}
Then my constructor: 然后是我的构造函数:
constructor() {
super();
}
I tried adding this to my constructor but it doesn't seem to affect anything: 我尝试将其添加到构造函数中,但似乎没有任何影响:
constructor() {
super();
this.candidates = [];
}
The result should be that the cards in my template dom-repeat show all the candidates. 结果应该是我的模板dom-repeat中的卡片显示了所有候选者。 Instead I'm getting nothing is being shown.
相反,我什么也没得到显示。 But when I
console.log
I could see all my candidates. 但是当我使用
console.log
我可以看到我所有的候选人。
I am not sure where your _checkParties
is being called, but it sounds like Polymer isn't aware that you updated the candidates array
. 我不确定
_checkParties
的调用位置,但是听起来Polymer并不知道您更新了候选人array
。
I think that the first attempt could be to use the set method, to be sure it's notified of the update, as described here . 我认为,第一次尝试可能是使用set方法,以确保它被通知的更新,如所描述这里 。 So that would mean to replace your last statement in the method.
因此,这将意味着替换该方法中的最后一条语句。 Instead of
代替
this.candidates = candidate_list;
you would have 你将会拥有
this.set('candidates', candidate_list);
Another option, that seems to be very well suited for what you're doing would be to have the candidates list as a computed property. 似乎非常适合您正在执行的另一种选择是将候选人列表作为计算属性。 So you would just add to your property definition the
'computed'
key: 因此,您只需将
'computed'
键添加到属性定义中:
candidates: {
type: Array,
value: [],
computed: '_checkParties(candidatesResponse)',
}
and in your method you would have to return the list, instead of overwritting the property, so 并且在您的方法中,您必须返回列表,而不是覆盖属性,因此
return candidate_list;
instead of the same line mentioned above. 而不是上面提到的同一行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.