dimanche 17 avril 2016

Ember.js add css class for specific model id

I am working on chat app. I have template of component - rooms

<div class='border rooms'>
    <button class="add-room-container">
        <div >Add room</div>
    </button>
    {{#each model as |room|}}
     <button class="room-container" 
             {{action "onRoomClicked" room.id}} 
             {{bind-attr class="currentRoomId===room.id:currentRoom"}}>
         <div class="deleteRoom" {{action "deleteRoom" room.id bubbles=false}}>
             X
         </div>
         <div>{{room.name}}</div>
         <div>{{room.createdAt}}</div>
     </button>
    {{/each}}
</div>

and component js file import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    onRoomClicked(roomId) {
      this.set('currentRoomId', roomId);
    },
    deleteRoom(room) {
      console.log('room removed');
    }

} });

and I have problem with the line

{{bind-attr class="currentRoomId===room.id:currentRoom"}}

I would like to check if current button is the last which was clicked (it is set in onRoomClicked) and if it is then add currentRoom class to button

I was trying to set dynamic property but I don't know how can I access current model (room) id from component and then compare it like I do in template




Aucun commentaire:

Enregistrer un commentaire