ember.js - Computed property on key of object passed as component parameter -

i have messages service messages saved in database , set them globally user have them set so

  messages: [     ember.object.create({       id: 1,       name: "out bid",       body: "you've been out bid on item",       read: false,       seen: false     }),     ember.object.create({       id: 2,       name: "out bid",       body: "you've been out bid on item, you've been out bid on item",       read: true,       seen: false     })   ], 

i have computed tell me how many of these messages have not been marked seen , when click on bubble shows if number on 0 go messages route. in messages route inject messages service , set model equal messages service has in it

model() {     return this.get('messages').get('messages'); } 

this route displays messages in each loop renders component

{{#each model key="id" |message|}}     {{message-item message=message}} {{/each}} 

in component trying add unread class so

classnamebindings: ['unread'], unread: ember.computed('message.unread',function(){     return this.get('message').get('read') === false; }), 

and working, when fire click action show message in modal , therefore mark read computed not updating

click() {     var message = this.get('message');     this.get('notification').notify({message: message.get('body')});     message.set('read',true); } 

if console.log value of message.get('read') before , after set it, see being set, template not updating computed remove unread class after it's marked read.

you watch wrong property. watch read instead of unread:

classnamebindings: ['unread'], unread: ember.computed('message.read',function(){     return this.get('message').get('read') === false; }),