ember.js - 如何跟踪 Glimmer 组件中的嵌套属性？

Question

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

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

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

我的第一次尝试是制作一个 setter/getter :

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。如果您的 hbs 中有 {{this.my_obj.some.deeply.nested.path.to.val}} 或者返回的 getter 没有任何区别.

但是如果您执行 this.my_obj.some.deeply.nested.path.to.val = "something" 并且您希望更新值，则需要确保在 this.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
}

或者你手 Action 废。所以这会起作用:

@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 上定义。这是行不通的。它应该直接定义在您想要更改应触发更新的内容的位置。但是，您可以毫无问题地使用 setter/getter 。只要您使用 objsomething = value 设置的所有内容都是正确的 @tracked，它就会正常工作。同样(纯)函数调用也可以正常工作。