从 EmberJS 中的路由观察服务上的 属性
Observing a property on a service from a route in EmberJS
我想我没有理解这里的概念。据我所知,任何 Ember.object
都可以观察另一个 Ember.object
.
的属性
所以,我有一个服务、一个路由器和一个组件。我需要组件和路由器能够观察到服务上的 属性。完全有可能我只是以错误的方式构建解决方案,我将在最后概述我正在尝试做的事情。
这是我大概拥有的:
/services/thing-manager.js
export default Ember.Service.extend({
observedProperty: 'original value'
});
/components/thing-shower.js
export default Ember.Component.extend({
thingManager: Ember.inject.service(),
myObserver: Ember.observer(
'thingManager.observedProperty',
function() {
// This shows up as anticipated, unlike the one in the routes
console.log('THING SHOWER COMPONENT observed change on thingManager')
}
),
actions: {
changeObservedProperty: function() {
let thingManager = this.get('thingManager')
let newText = thingManager.get('observedProperty') + '!'
// here i am sure to call `set` to make sure observers fire
thingManager.set('observedProperty', newText)
}
}
});
/routes/things.js
export default Ember.Route.extend({
thingManager: Ember.inject.service(),
underObservation: Ember.observer('thingManager.observedProperty', function() {
// This is what I expect to fire, but does not.
console.log('THINGS ROUTE observed change on thingManager')
}),
});
如您所见,我期待组件和路由器中两个观察器的控制台输出。为什么这行不通?
我的总体目标
这可能是一个单独的问题,但我想知道是否有更好的方法来完成我正在尝试做的事情。我一直在了解 'data down, actions up',这使我采用了这种方法。我正在建立一个网站,该网站加载一个 json 文件,其中包含一堆 GPS 坐标并将它们贴在地图上。
目标是点击地图标记,然后加载相应的数据。这也应该改变路线。所以,我的想法是,在服务中跟踪我的标记,当所选标记发生变化时,路由器会观察到这一点并过渡到下一条路线。该组件还会注意到已更改的 属性 并更新地图。
谢谢大家!
在things.js
路由文件中你没有使用accessed/usedthing-manager
服务,所以不会触发观察者。
routes/thing.js
init(){
this._super(...arguments);
this.get('thingManager');
},
引入这个会让你的观察者被解雇。
我想说,如果您遵循 DDAU 原则,那么您的组件不应改变事物管理器服务属性。它应该发送动作到服务并改变它。
注意:您可以在任何 Ember.Object 中拥有观察者和计算属性,这意味着您也拥有事物管理器服务。
我想我没有理解这里的概念。据我所知,任何 Ember.object
都可以观察另一个 Ember.object
.
所以,我有一个服务、一个路由器和一个组件。我需要组件和路由器能够观察到服务上的 属性。完全有可能我只是以错误的方式构建解决方案,我将在最后概述我正在尝试做的事情。
这是我大概拥有的:
/services/thing-manager.js
export default Ember.Service.extend({
observedProperty: 'original value'
});
/components/thing-shower.js
export default Ember.Component.extend({
thingManager: Ember.inject.service(),
myObserver: Ember.observer(
'thingManager.observedProperty',
function() {
// This shows up as anticipated, unlike the one in the routes
console.log('THING SHOWER COMPONENT observed change on thingManager')
}
),
actions: {
changeObservedProperty: function() {
let thingManager = this.get('thingManager')
let newText = thingManager.get('observedProperty') + '!'
// here i am sure to call `set` to make sure observers fire
thingManager.set('observedProperty', newText)
}
}
});
/routes/things.js
export default Ember.Route.extend({
thingManager: Ember.inject.service(),
underObservation: Ember.observer('thingManager.observedProperty', function() {
// This is what I expect to fire, but does not.
console.log('THINGS ROUTE observed change on thingManager')
}),
});
如您所见,我期待组件和路由器中两个观察器的控制台输出。为什么这行不通?
我的总体目标
这可能是一个单独的问题,但我想知道是否有更好的方法来完成我正在尝试做的事情。我一直在了解 'data down, actions up',这使我采用了这种方法。我正在建立一个网站,该网站加载一个 json 文件,其中包含一堆 GPS 坐标并将它们贴在地图上。
目标是点击地图标记,然后加载相应的数据。这也应该改变路线。所以,我的想法是,在服务中跟踪我的标记,当所选标记发生变化时,路由器会观察到这一点并过渡到下一条路线。该组件还会注意到已更改的 属性 并更新地图。
谢谢大家!
在things.js
路由文件中你没有使用accessed/usedthing-manager
服务,所以不会触发观察者。
routes/thing.js
init(){
this._super(...arguments);
this.get('thingManager');
},
引入这个会让你的观察者被解雇。
我想说,如果您遵循 DDAU 原则,那么您的组件不应改变事物管理器服务属性。它应该发送动作到服务并改变它。
注意:您可以在任何 Ember.Object 中拥有观察者和计算属性,这意味着您也拥有事物管理器服务。