在作为组件参数传递的对象的键上计算 属性

Computed property on key of object passed as component parameter

我有一个消息服务,它最终会将消息保存在数据库中并为用户全局设置它们,但现在我将它们设置成这样

  messages: [
    Ember.Object.create({
      id: 1,
      name: "Out Bid",
      body: "You've been out bid on an item",
      read: false,
      seen: false
    }),
    Ember.Object.create({
      id: 2,
      name: "Out Bid",
      body: "You've been out bid on an item, You've been out bid on an item",
      read: true,
      seen: false
    })
  ],

我有一些计算结果会告诉我这些消息中有多少没有被标记为 seen,当我点击这个显示该数字是否超过 0 的气泡时,我会转到 messages 路线。 在 messages 路由中,我注入 messages 服务并将模型设置为等于服务中包含的消息

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

此路由在呈现组件的每个循环中显示消息

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

在我尝试添加 unread class 的组件中

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

这是有效的,但是当我触发点击操作以在模式中显示消息并因此将其标记为 read 时,计算结果未更新

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

如果我 console.log 在我设置它之前和之后 message.get('read') 的值,我看到它被正确设置,但模板没有更新计算以删除 unread class 标记为已读后。

你看错了属性。观看 read 而不是 unread:

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