There seems to be a concept that I'm struggling to grasp here. To my understanding, any instance of Ember.object should be able to observe properties on another instance of Ember.object.
In my scenario, there is a service, a router, and a component involved. The requirement is for the component and the router to observe a property on the service. It's possible that I might not have structured the solution correctly, so I will outline what I'm attempting to achieve at the end.
This is essentially what I currently have:
/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 console log works as expected, 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') + '!'
// Ensure to call `set` to trigger observers
thingManager.set('observedProperty', newText)
}
}
});
/routes/things.js
export default Ember.Route.extend({
thingManager: Ember.inject.service(),
underObservation: Ember.observer('thingManager.observedProperty', function() {
// Expected console output that doesn't happen
console.log('THINGS ROUTE observed change on thingManager')
}),
});
It can be seen that I anticipate receiving console output from both observers in the component and router. However, why isn't this working?
Link to Twiddle!
Main Objectives
This could potentially be a separate inquiry, but I am interested in finding out if there is a more efficient way to achieve my goals. I've been introduced to the 'data down, actions up' concept, which has guided my current approach. The objective is to develop a website that loads a JSON file containing various GPS coordinates and displays them on a map.
The aim is to click on a map marker and have it load corresponding data, ultimately altering the route. Therefore, I thought about maintaining my markers within a service, where a change in the selected marker would be observed by the router for transitioning to the next route. Simultaneously, the component would detect the property change and update the map accordingly.
Thank you all!