Question

我正在建立我的应用程序的通知功能，就像Facebook的通知一样。我几乎让它工作但却无法观察计算属性。

以下是该方案：

有很多交易，当交易更新时（比如它的名称/价格已经更改），通知将通过RabbitMQ发送。我们发送的对象有效负载，它有一个属性“status”，可以是“read”或“unread”。

控制器：

notificationsCount: function() {
  var notifications = this.get('notifications');
  var unreadCount = 0;
  for (var i = 0; i < notifications.length; i++) {
    if (notifications[i].status == 'unread') {
      unreadCount++;
    }
  }
  return unreadCount;
}.property('notifications.[]'),

这里，最初'notifications'是一个空数组。来自RMQ的所有通知作为对象有效负载都在此内部。这个'unreadCount'就是我想要显示的有点像通知图标上的小徽章。

当我点击通知图标时，所有通知的状态应从'未读'更改为'已读'。

控制器：

action:{
    readNotifications: function () {
      var notifications = this.get('notifications');
      for (var i = 0; i < notifications.length; i++) {
        notifications[i].status = 'read';
      }
   },
}

通过调试，我发现一切正常，直到这一点。但我想要的是，一旦用户点击通知图标并且所有通知都被标记为已读，则notificationCount应设置为零，因为没有任何未读的通知。

理论上，我必须在readNotifications操作中观察notificationsCount或执行notificationsCount。但我找不到办法。如果还有其他方式，请随时分享。

提前致谢。

Answer 1

缺点是您应该定义notificationsCount计算属性以收听notifications.@each.status而不是notifications.[]。当数组内容发生更改（添加或删除元素）时会触发.[]，而当任何数组元素上的.@each.prop属性发生更改时会触发prop。

有关详细信息，请参阅the relevant Ember.js docs。

此外，您可以使用NativeArray方法使代码更简洁（因为您已经使用.property()简写，因此您确实启用了原型扩展）。您的整个notificationsCount可以写成

notificationsCount: function() {
    return this.get('notifications').filterBy('status', 'unread').length;
}.property('notifications.@each.status'),

和你的行动

readNotifications: function () {
   this.get('notifications').setEach('status', 'read');
},

如何在EmberJS中观察计算属性？创建类似FB的通知功能

1 个答案: