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>

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

Answer 1

我认为这个问题可能是由对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__]]">

动态定型聚合物元素

1 个答案: