javascript - Ember js 服务和 filterBy

Question

我有一项服务可以管理我应用中的所有错误和警报。代码看起来像这样

服务

import Ember from 'ember';

export default Ember.Service.extend({
messages: null,

init() {
    this._super(...arguments);
    this.set('messages', []);
},

add: function (severity, msg, messageType) {
    if (severity === 'error') {severity = 'danger';}

    var msgObject ={
        severity: severity,
        messageType: messageType,
        msg: msg,
        msgId: new Date()
    };      
    this.get('messages').pushObject(msgObject);
},

remove(msgId) {     
    this.get('messages').removeObject(msgId);
},

empty() {
    this.get('messages').clear();
}
});

组件

import Ember from 'ember';

export default Ember.Component.extend({
messageType:'global',
messageHandler: Ember.inject.service(),

messages: function(){
    return this.get('messageHandler.messages').filterBy('messageType',this.get('messageType'));
}.property('messageHandler.messages'),

actions : {
    dismissAllAlerts: function(){
        this.get('messageHandler').empty();
    },
    dismissAlert: function(msgId){
        this.get('messageHandler').remove(msgId);
    }
}    
}); 

初始化器

export function initialize(container, application) {
application.inject('component', 'messageHandler', 'service:message-handler');
}

export default {
name: 'message-handler',
initialize : initialize
};

模板

import Ember from 'ember';

export default Ember.Component.extend({
messageType:'global',
messageHandler: Ember.inject.service(),

messages: function(){
    return this.get('messageHandler.messages');
}.property('messageHandler.messages'),

actions : {
    dismissAllAlerts: function(){
        this.get('messageHandler').empty();
    },
    dismissAlert: function(msgId){
        this.get('messageHandler').remove(msgId);
    }
}    
}); 

每当有错误时我都会这样添加

this.get('messageHandler').add('error',"Unable to get ossoi details","global");

我的问题是组件中的 filterBy 不起作用。如果我删除 filterBy() 它会起作用，我可以在模板中看到错误。我对 ember 有点陌生，所以如果有人能帮我弄清楚这里缺少什么，或者如果有更好的方法，请告诉我

Answer 1

filterBy 用法很好，应该可以正常工作。但是当您从 messageHandler.messages 中添加/删除项目时，不会重新计算 messages 计算属性。

messages: Ember.computed('messageHandler.messages.[]', function() {
        return this.get('messageHandler.messages').filterBy('messageType', this.get('messageType'));
    }),

在上面的代码中，我使用 messageHandler.messages.[] 作为 messages 计算属性的依赖键，以便在添加/删除项目时调用它。

引用:https://guides.emberjs.com/v2.13.0/object-model/computed-properties-and-aggregate-data/

Computed properties dependent on an array using the [] key will only update if items are added to or removed from the array, or if the array property is set to a different array.