2017-06-08 24 views
3

我有一个服务来管理我的应用程序中的所有错误和警报。并且代码看起来像这样Ember js服务和filterBy

服务

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()它的作品,我可以看到模板中的错误。有点新烬,所以如果任何人都可以帮助我找出什么是在这里失踪或如果有更好的方式做到这一点,请让我知道

回答

3

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/

依赖使用[]键的阵列上计算属性将仅 如果项目被添加到或从阵列中移除,或者如果 阵列属性被设置为一个不同的更新阵列。

+1

谢谢@Kumkanilam这工作完美。它以我想要的方式工作。 – Ghost