javascript - 动态设置 polymer 元素的样式

我试图使纸卡元素根据Fire基地上客户数据的状态更改颜色，但是由于某种原因，颜色仅在客户第二次单击时更新。现在，我已将纸卡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（）{
    聚合物（{
      是：“列表显示”，

  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更新速度快，但第二次单击始终可以正常工作……有什么建议吗？

最佳答案

我认为问题可能是由于调用Firebase引起的。 store.on("value",不是同步功能。但是，稍后在代码中，您将假定您已经具有一个值，该值将在稍后触发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__]]">