javascript - 动态样式化 polymer 元素

Question

我试图根据 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>

(函数(){ polymer ({ 是:'列表显示'，

  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 快，但它在第二次点击时总是工作正常......有什么建议吗？

Answer 1

我认为问题可能是由调用 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 不应更改。然后，要绑定(bind)到类属性，请使用 $ 符号。当您更新模型时，您应该使用 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__]]">