我正在尝试根据Fire base上客户数据的状态更改纸质卡元素的颜色,但由于某种原因,颜色仅在客户第二次点击时更新。现在我将纸牌ID设置为firebase数据,以使其更改颜色。这是我的元素样式代码:
<style is="custom-style">
:host {
display: block;
}
#cards {
@apply(--layout-vertical);
@apply(--center-justified);
}
.row {
padding: 20px;
margin-left: 10px;
}
paper-card {
padding: 20px;
}
#check {
float: right;
bottom: 15px;
--paper-card
}
#Done {
--paper-card-header: {
background: var(--paper-green-500);
};
--paper-card-content: {
background: var(--paper-green-300);
};
}
#Default {
/*Apply Default Style*/
/*--paper-card-content: {*/
/* background: var(--paper-red-500);*/
/*};*/
}
paper-icon-button.check{
color: var(--paper-green-500);
}
paper-icon-button.check:hover{
background: var(--paper-green-50);
border-radius: 50%;
}
#check::shadow #ripple {
color: green;
opacity: 100%;
}
.iron-selected{
color: green;
}
这是模板:
<template>
<firebase-collection
location="https://calllistmanager.firebaseio.com/Wilson"
data="{{wilsonData}}"></firebase-collection>
<div id="cards">
<template id="cards" is="dom-repeat" items="{{wilsonData}}" as="customer">
<paper-card id="{{customer.status}}" class="{{customer.status}}" heading="[[customer.__firebaseKey__]]">
<div class="card-content">
<span>Phone: </span><span>[[customer.number]]</span>
<span>Status: </span><span>[[customer.status]]</span>
<paper-icon-button style="color: green" id="check" on-tap="checktap" icon="check">
</paper-icon-button>
</div>
</paper-card>
</template>
</div>
这是我的剧本:
<script>
(function(){ 聚合物({ 是:&#39; list-display&#39;,
properties: {
wilsonData: {
type: Object,
observer: '_dataObserver'
}
},
ready: function() {
var listRef = new Firebase("https://calllistmanager.firebaseio.com/Wilson");
},
checktap: function(e){
// e.model.customer.status = "Done";
console.log("Starting Status: " + e.model.customer.status);
ref = new Firebase("https://calllistmanager.firebaseio.com/Wilson")
var stat;
var store = ref.child(e.model.customer.__firebaseKey__);
store.on("value", function(snapshot){
stat = snapshot.child("status").val();
});
if(stat == "Done"){
store.update({
"status": "Default"
});
e.model.customer.status = "Default";
}
else {
store.update({
"status": "Done"
});
e.model.customer.status = "Done";
}
console.log("Ending Status: " + e.model.customer.status);
this.updateStyles()
}
});
})();
起初我认为问题可能是该函数运行updateStyles();比firebase更快可以更新,但它在第二次点击时总能正常工作......有什么建议吗?
答案 0 :(得分:2)
我认为这个问题可能是由对firebase的调用引起的。 store.on("value",
不是同步函数。但是,稍后在您的代码中,您假设您已经有一个值,稍后将在值事件触发时设置该值。您可以尝试在事件处理程序中添加其余代码。像这样:
checktap: function(e){
// e.model.customer.status = "Done";
console.log("Starting Status: " + e.model.customer.status);
ref = new Firebase("https://calllistmanager.firebaseio.com/Wilson")
var store = ref.child(e.model.customer.__firebaseKey__);
store.once("value", function(snapshot){
var stat = snapshot.child("status").val();
if(stat == "Done"){
store.update({
"status": "Default"
});
e.model.set("customer.status", "Default");
}
else {
store.update({
"status": "Done"
});
e.model.set("customer.status", "Done");
}
console.log("Ending Status: " + e.model.customer.status);
this.updateStyles();
}.bind(this));
}
基本上,您要等到stat
变量设置为执行其余任务。另请注意,最后的bind(this)
将允许您从事件处理程序更新样式。
<强>更新强>
还有一些问题。首先,使用类来更改样式而不是ID更好。 ID不应该改变。然后,要绑定到class属性,请使用$
符号。更新模型时,应使用set
API。
看看this plunker。这是一个小工作示例(仅适用于Chrome),当您单击复选标记时会更改样式。但是,它不使用Firebase。
以下是关于课程风格的方法。
.Done {
--paper-card-header: {
background: var(--paper-green-500);
};
--paper-card-content: {
background: var(--paper-green-300);
};
}
在你的模板中:
<paper-card class$="{{customer.status}}" heading="[[customer.__firebaseKey__]]">