将观察者转换为辛烷值的 ember 的正确方法是什么？

如何解决将观察者转换为辛烷值的 ember 的正确方法是什么？

我试图将我所有的 ember 组件转换为 OCTANE 版本。但我有一个更大的疑问。如何将 observer 代码转换为 OCTANE 版本？例如，

parent.hbs
 
 <Child @value={{this.value}} />

child.hbs

 <div>{{this.newUpdate}}</div>

child.js

  export default class ChildComponent extends Component {     
      /** Previous code: sample code only
        valueUpdate: observer('value',function() {
            this.newValue = this.value / 12 * 2;
        })
      */
  }

如何将观察者更新为辛烷值？任何想法请...

注意：我尝试使用“@observer”，但它在组件内部不起作用。

解决方法

Ember Octane 在这方面遵循另一种编程模型。与其观察一个属性并在它发生变化时更新另一个属性，您应该使用本机 getter 来派生状态。

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class ChildComponent extends Component {
  // I assume that value is a local state of this component.
  // If it's an argument passed to the component on invocation.
  // You don't need to declare it here but can reference
  // this.args.value directly in the getter.
  @tracked value;

  get newValue() {
    return this.value / 12 * 2;
  }
}

只要值是从跟踪属性派生的，模板就会在更改时重新呈现。无需像处理计算属性一样使用观察者手动更新值或显式列出依赖项。

传递给组件的参数是自动跟踪的。因此，如果 value 不是本地状态而是作为参数传入，则很简单：

import Component from '@glimmer/component';

export default class ChildComponent extends Component {
  get newValue() {
    return this.args.value / 12 * 2;
  }
}