Emberjs：使用 args 作为跟踪属性

Question

我正在 controller 中进行商店查询，然后将结果传递给子组件。

// Controller
@tracked comment;

@action
async fetchComment() {
  const comment = await this.store.query('note', {
    filter: {
      listing: this.listing.id,
    },
  });

  if (comment && comment.length > 0) {
    this.comment = comment.firstObject;
  }
}


// Template
<MyComponent @comment={{this.comment}} />

我想使用 arg 填充子组件中的跟踪属性。

// Component
@tracked comment = this.args.comment;

我发现这不起作用，但作为 getter 效果很好。但是对于 getter 我无法在删除该记录时将其设置为 null。

我也试过在 Constructor 中设置跟踪属性但那也没有用。

我怀疑这与在 args 中传递 promise 或 store object 有关，因为这适用于静态数据。

Answer 1

为什么你的代码不起作用

此代码无法运行：

@tracked comment = this.args.comment;

这是因为控制器上的 comment 最初是 undefined 但稍后会在网络请求完成时将赌注设置为 comment.firstObject 并且 await 在您的 fetchComment函数returns。一般来说，args 上的所有内容基本上总是表现得像它的 @tracked（更准确地说，你会把它描述为 getters）。所以这通常会更新得很好。但是分配 @tracked comment = this.args.comment; 仅在您创建组件时发生一次，因此您不再依赖 args.

上的更新

为什么不能将 `this.args.comment` 设置为 null

如果您使用 getter 或直接始终使用 this.args.comment，则无法更改此引用。这是因为 this.args 始终是只读的。您可以 更改 this.args.something 上的 个对象，但您永远不能更改 this.args.

上的引用或原始值

旁注：仅当使用 <AngleBracket /> 语法调用该组件时才会出现这种情况。对于较旧的 {{curly-component}} 语法，这是不正确的。所以这不取决于组件本身，而是组件如何被调用。

您可以通知控制器删除引用

一件好的事情是将 deleteComment 操作传递给组件，该组件基本上在控制器上执行类似 this.comment = null 的操作。然后你直接使用 this.args.comment 或通过 getter 并且你可以调用 this.args.deleteComment() 将控制器上的 comment 设置为空，这将更新任何使用 this.args.comment或 getter returns this.args.comment.

这主要是因为在您的体系结构中，控制器拥有数据（因为它会加载数据）。所以控制器也有责任删除它。

如果你使用`ember-data`你可以检查`isDeleted`

如果它是一个 ember-data 模型（如果你调用 this.store，它可能是）那么它有一个 isDeleted 属性。您可以使用它来检查记录是否被删除，因为 ember-data 记录即使被删除也不会消失。正是因为这样的问题。

你如何使用另一个属性来影子一个参数

你可以做这样的事情来 shadow 你的组件中的一个参数：

@tracked commentIsDeleted = false;
get comment() {
  return this.commentIsDeleted
    ? null
    : this.args.comment;
}

起初这种方式 this.comment 将像正常 getter 一样工作，但您可以通过设置 this.commentIsDeleted = true; 隐藏删除 它。从那以后 this.comment 将是 null.

Emberjs：使用 args 作为跟踪属性

Emberjs: Use args as tracked property

ember.js

为什么你的代码不起作用

为什么不能将 `this.args.comment` 设置为 null

您可以通知控制器删除引用

如果你使用`ember-data`你可以检查`isDeleted`

你如何使用另一个属性来影子一个参数

Emberjs：使用 args 作为跟踪 属性

Emberjs: Use args as tracked property

ember.js

为什么你的代码不起作用

为什么不能将 this.args.comment 设置为 null

您可以通知控制器删除引用

如果你使用ember-data你可以检查isDeleted

你如何使用另一个属性来影子一个参数

Emberjs：使用 args 作为跟踪属性

为什么不能将 `this.args.comment` 设置为 null

如果你使用`ember-data`你可以检查`isDeleted`