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（）它工作，我可以看到模板中的错误。我有点新鲜，所以如果有人能帮我弄清楚这里缺少什么，或者有更好的方法，请告诉我

Answer 1

filterBy使用效果很好，应该运行良好。但是，只要您从messages添加/删除项目，就不会重新计算messageHandler.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/

仅使用[]键依赖于数组的计算属性更新项目是否添加到数组或从数组中删除，或者如果 array属性设置为不同的数组。

Ember js服务和过滤器

1 个答案: