I have a parent route
. Inside this route there is a component that is rendered.
The route
has a template.hbs
file that contains a HTML div element. I need to be able to change the class of this div element from within my child component
.
To do this, I was planning on using a service. The idea being inject the service into both the route
and child component
and then bind the class of the div to a property on the service. Then, when I inject the service into the child component I can change the property and see any changes reflected by the parent route.
Problem is, the binding doesn't seem to work!
Parent Route:
Template: <div class=>
Route.js:
dashboardContainerManager: service('dashboard-container-manager'),
afterModel(model) {
model.set('containerClass', this.get('dashboardContainerManager').dashboardContainerClass);
SERVICE:
export default Service.extend({
dashboardContainerClass: null,
init() {
debugger; //placed to ensure one instance being made
this._super(...arguments);
this.set('dashboardContainerClass', 'container dashboard-container'); //need to set it here to prevent glimmer error
},
changeContainerClass(newClass) {
debugger;
this.set('dashboardContainerClass', newClass);
}
});
Child Component:
dashboardContainerManager: service('dashboard-container-manager'),
init() {
this._super(...arguments);
this.get('dashboardContainerManager').changeContainerClass('test');
},
The result of the above code is that the class of my div is initially set to "container dashboard-container" because that's the value that the dashboardContainerClass
property on my service is initialised to. However, when the value is changed to "test" inside my component, the class of my div isn't updated which suggests it's not bound properly to the value of dashboardContainerClass
. I tried using a computed property in various places as well but couldn't get anything to work.
What am I doing wrong here?!
Aucun commentaire:
Enregistrer un commentaire