I'm building a nested layout where some information can be set on a controller that controls the mode of the application, affecting the controllers nested under it.
I feel like I've tried everything, but I can't get the nested controllers (and therefore components) to respond to the changes in a controller further up in the route hierarchy, despite observing its property.
Below is a diagram of the controller/component setup and some simplified code to show what I'm seeing.
The component that triggers the event has the following JS:
App.LimitTriggerComponent = Ember.Component.extend({
actions: {
selectGroup: function( groupId, groupType ){
this.sendAction( "action", groupId, groupType );
}
}
});
and the following handlebars:
<div>
<span {{action "selectGroup" 1 "Group Type"}}>
Some Text
</span>
<span {{action "selectGroup" 2 "Group Type"}}>
Some Other Text
</span>
</div>
And below is my controller setup:
App.NamespaceController = Ember.Controller.extend({
activeGroup: { id: null, type: null },
actions: {
limitByGroup: function( groupId, groupType ){
// clicks are responded to in this handler
// inspecting the activegroup here yields the expected results
this.set( "activeGroup", { id: groupId, type: groupType });
// also here, the property is actually updated, but observers aren't fired
}
}
});
App.NamespaceInnerController = Ember.Controller.extend({
needs: ["namespace"],
activeGroup: Ember.computed.alias( "controllers.namespace.activeGroup" ),
init: function(){
// this logs as expected, although it's an object literal, not an Ember object
console.log( this.get( "activeGroup" ));
},
testFn: function(){
console.log( "Really baffled as to why this won't log anything." );
}.observes( "activeGroup" )
});
I doubt it makes sense to be exhaustive about everything I've tried, and at this point I'm kind of wondering if it could be a load order issue or something else seemingly-orthogonal. I'd be open to any suggestions at all after fighting with this for a long time :/
Thanks!
Aucun commentaire:
Enregistrer un commentaire