javascript - Ember : how to bind HTML class to Service property, 因此该类是动态的

Question

我有一个家长route 。在此路由内有一个被渲染的组件。

route有一个template.hbs包含 HTML div 元素的文件。我需要能够从我的 child component 中更改此 div 元素的类.

为此，我计划使用一项服务。这个想法是将服务注入(inject) route和 child component然后将 div 的类绑定(bind)到服务上的属性。然后，当我将服务注入(inject)子组件时，我可以更改属性并查看父路由反射(reflect)的任何更改。

问题是，绑定(bind)似乎不起作用!

父路线:

模板: <div class={{model.containerClass}}>

路线.js:

dashboardContainerManager: service('dashboard-container-manager'),

afterModel(model) {
   model.set('containerClass', this.get('dashboardContainerManager').dashboardContainerClass);

服务:

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);
  }
});

子组件:

  dashboardContainerManager: service('dashboard-container-manager'),
  init() {
    this._super(...arguments);
    this.get('dashboardContainerManager').changeContainerClass('test');
  },

上述代码的结果是我的 div 的类最初设置为“容器仪表板容器”，因为这是 dashboardContainerClass 的值。我的服务上的属性已初始化为。但是，当我的组件内的值更改为“test”时，我的 div 的类不会更新，这表明它没有正确绑定(bind)到 dashboardContainerClass 的值。 。我也尝试在不同的地方使用计算属性，但没有任何效果。

我在这里做错了什么？!

Answer 1

有一个读取计算属性宏可以帮助您:

https://emberjs.com/api/ember/3.7/functions/@ember%2Fobject%2Fcomputed/reads

在您的组件中，您只需执行以下操作:

import { reads } from '@ember/object/computed';

  // ...
  dashboardContainerManager: service('dashboard-container-manager'),

  containerClass: reads('dashboardContainerManager.dashboardContainerClass'),

更新/完整示例:

服务:

export default Service.extend({
  dashboardContainerClass: 'container dashboard-container',

  changeContainerClass(newClass) {
    this.set('dashboardContainerClass', newClass);
  }
});

路线:

export default Route.extend({
  // removed afterModel and service injection
});

Controller :

export default Controller.extend({
  containerManager: service('dashboard-container-manager'),

  containerClass: reads('containerManager.dashboardContainerClass'),
});

模板:

<div class='some-other-class {{containerClass}}'>
  other stuff
</div>