javascript - Styling Polymer Element Dynamically -

i trying make paper-card element change colors based on status of customers data on fire base, reason color updates on second click of customer. right have paper cards id set firebase data in order make change colors. here's elements style code:

<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; } 

and here template:

  <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> 

here script:

<script> 

(function() { polymer({ is: 'list-display',

  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()   } }); 

})();

at first thought problem may function runs updatestyles(); faster firebase can update works fine on second click...any suggestions?

i think problem caused call firebase. store.on("value", not synchronous function. however, later in code assume have value, set later on whenever value event fires. try adding rest of code in event handler. this:

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)); } 

essentially, wait until stat variable has been set rest of tasks. note, bind(this) @ end, allow update the styles event handler.

update

there couple of more issues. first it's better uses classes changing styles , not ids. ids should not change. then, bind class attribute, use $ sign. when update model, should use set api. have @ this plunker. small working example (only works in chrome) changes styles when click checkmark. not use firebase, however.

here's how style classes.

.done {   --paper-card-header: {     background: var(--paper-green-500);   };    --paper-card-content: {     background: var(--paper-green-300);   }; } 

and in template:

<paper-card class$="{{customer.status}}" heading="[[customer.__firebasekey__]]">