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

Question

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

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

Answer 1

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

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

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

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

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

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