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