从 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')
  }),
});

如您所见,我期待组件和路由器中两个观察器的控制台输出。为什么这行不通?

Twiddle here!

我的总体目标

这可能是一个单独的问题,但我想知道是否有更好的方法来完成我正在尝试做的事情。我一直在了解 'data down, actions up',这使我采用了这种方法。我正在建立一个网站,该网站加载一个 json 文件,其中包含一堆 GPS 坐标并将它们贴在地图上。

目标是点击地图标记,然后加载相应的数据。这也应该改变路线。所以,我的想法是,在服务中跟踪我的标记,当所选标记发生变化时,路由器会观察到这一点并过渡到下一条路线。该组件还会注意到已更改的 属性 并更新地图。

谢谢大家!

things.js路由文件中你没有使用accessed/usedthing-manager服务,所以不会触发观察者。

routes/thing.js

init(){
    this._super(...arguments);
    this.get('thingManager');
},

引入这个会让你的观察者被解雇。

我想说,如果您遵循 DDAU 原则,那么您的组件不应改变事物管理器服务属性。它应该发送动作到服务并改变它。

注意:您可以在任何 Ember.Object 中拥有观察者和计算属性,这意味着您也拥有事物管理器服务。