Ember：如何将HTMLclass绑定到服务属性，使class是动态的

Question

我有一个parentroute。在这条路线中有一个组件被渲染。

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

中更改此 div 元素的 class

为此，我打算使用一项服务。将服务注入 route 和 child component 然后将 div 的 class 绑定到属性服务。然后，当我将服务注入 child 组件时，我可以更改属性并查看 parent 路由反映的任何更改。

问题是，绑定似乎不起作用！

Parent路线：

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

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

Child 分量：

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

上面代码的结果是我的div的class最初设置为"container dashboard-container"因为那是dashboardContainerClass[=69=的值] 在我的服务上被初始化为。但是，当我的组件中的值更改为 "test" 时，我的 div 的 class 没有更新，这表明它没有正确绑定到 dashboardContainerClass 的值。我也尝试在不同的地方使用计算属性，但无法正常工作。

我哪里做错了？！

Answer 1

这里有一个 reads 计算的属性宏可以帮助您：

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

控制器：

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

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

模板：

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

Ember：如何将HTMLclass绑定到服务属性，使class是动态的

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

javascript

ember.js

更新/完整示例：