mercredi 30 janvier 2019

Ember: how to bind HTML class to Service property, so that class is dynamic

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