Glimmer.js 如何在不使用构造函数的情况下将跟踪属性重置为初始值

Question

在 Glimmer.js 中，在不使用构造函数的情况下将跟踪属性重置为初始值的最佳方法是什么？

注意：不能使用构造函数，因为它只在初始页面呈现时调用一次，并且在后续页面点击时不再调用。

Answer 1

这个答案有两个部分，但它们之间的共同主题是它们强调从命令式样式（在生命周期挂钩中显式设置值）到声明式样式（使用真正的单向数据流和/或使用装饰器来实现）的切换清楚地表明您在哪里根据参数对本地状态进行某种转换）。

1. 你确定你需要这样做吗？ 很多时候人们认为他们这样做了，他们实际上应该重组他们的数据流。 例如，许多的灰烬经典的时候，人们达到使用像钩子“分叉”的数据的模式didInsertElement或didReceiveAttrs 。 在 Glimmer 组件中（无论是在 Ember Octane 中还是在独立的 Glimmer.js 中），在数据所有者中简单地管理您的更新是惯用的：真正执行 data-down-actions-up。

2. 有时，在组件中创建跟踪数据的本地副本实际上是有意义的——例如，当您希望将来自 API 的数据与您在表单中处理数据的方式（因为用户界面是 API界限！ ）。 在这些场景中，来自tracked-toolbox的@localCopy和@trackedReset装饰器是很好的解决方案。

   • @localCopy大致按照其名称进行操作。 它创建了通过参数传入的数据的本地副本，您可以通过操作在本地更改它，但如果参数值更改，它也会切换回参数。

   • @trackedReset创建一些本地状态，当参数更新时重置。 与@localCopy不同，状态不是参数的副本，它只需要在参数更新时重置。

使用这两种方法中的任何一种，你最终都会得到比旧的 Ember Classic 方法更“声明性”的数据流：“分叉”数据是通过装饰器完成的（方法 2），而且大部分时间你不会结束根本不会分叉它，因为您只是将更改推送回原始数据的所有者 (1)。