如何跟踪 Glimmer 组件中的嵌套属性？

Question

我正在 Ember 中构建我的第一个 Glimmmer 组件，我的模板中有这样的东西：

<p>Some val: {{this.my_obj.some.deeply.nested.path.to.val}}</p>

然后我制作了一个相应的.js组件文件，并认为我会尝试从 HTML 中删除长路径。

我的第一次尝试是制作一个吸气剂：

get val() {
  return this.my_obj.some.deeply.nested.path.to.val;
}

现在使用模板：

<p>Some val: {{this.val}}</p>

这最初有效并显示分配给val变量的起始值，但它不会在基础val更改时更新。

所以我想我会尝试将 getter 标记为已跟踪，但这使输出消失了：

@tracked val;

get val() {
  return this.my_obj.some.deeply.nested.path.to.val;
}

然后我尝试了这个，但它不是有效的语法：

@tracked this.my_obj.some.deeply.nested.path.to.val;

那么这应该如何在 Glimmer 组件中处理呢？

当然，解决方案不是让 HTML 在每次引用变量时都引用这样的深层路径，但是新的 Ember 文档虽然很好，但在这个相对简单/常见的情况下，我没有更明智的选择。

Answer 1

很简单：无论您更改什么，都必须是@tracked. 如果你有{{this.my_obj.some.deeply.nested.path.to.val}}你的hbs或一个返回的吸气剂，那没有什么区别。

但是，如果您这样做this.my_obj.some.deeply.nested.path.to.val = "something"并且希望更新该值，则需要确保将 onthis.my_obj.some.deeply.nested.path.to val定义为已跟踪。

所以这行不通：

@tracked data;
constructor() {
  super(...arguments);
  this.data = { foo: 1 };
}
@action test() {
  this.data.foo = 2; // this will not correctly update
}

你需要确保foo是@tracked：

class DataWrapper {
  @tracked foo;
}

...

@tracked data;
constructor() {
  super(...arguments);
  this.data = new DataWrapper();
  this.data.foo = 1;
}
@action test() {
  this.data.foo = 2; // this will now correctly update
}

或者你手动失效。所以这将起作用：

@tracked data;
constructor() {
  super(...arguments);
  this.data = { foo: 1 };
}
@action test() {
  this.data.foo = 2; // this will not update
  this.data = this.data; // this ensures that everything that depends on `data` will correctly update. So `foo` will correctly update.
}

还有一件重要的事情：@tracked永远不应该在 getter 上定义。这是行不通的。它应该直接定义在您想要更改应该触发更新的内容的位置。但是，您可以毫无问题地使用 getter。只要您设置的所有内容都objsomething = value正确，它就会起作用@tracked。此外（纯）函数调用也能正常工作。