时间戳

首页 > 解决方案 > Emberjs：使用 args 作为跟踪属性

ember.js - Emberjs：使用 args 作为跟踪属性

问题描述

我正在执行存储查询，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;

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

我也尝试在中设置跟踪属性，Constructor但这也不起作用。

我怀疑这与传入 apromise或store objectargs 有关，因为这适用于静态数据。

标签： ember.js

解决方案

为什么您的代码不起作用

此代码不起作用：

@tracked comment = this.args.comment;

这是因为comment在控制器上最初是undefined但稍后会设置为comment.firstObject网络请求完成并且await您的fetchComment函数返回时。一般来说，一切args基本上总是表现得像它@tracked（更准确地说，你会将它描述为吸气剂）。所以这通常会更新得很好。但是分配@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()set 设置comment为 null，这将更新任何使用this.args.comment或返回的 getter this.args.comment。

这本质上是因为在您的架构中，控制器拥有数据（因为它加载了数据）。所以控制器也有责任删除它。

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

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

你如何使用另一个属性来隐藏一个论点

您可以执行以下操作来隐藏组件中的参数：

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

这种方式一开始this.comment会像普通的吸气剂一样工作，但你可以通过设置阴影删除this.commentIsDeleted = true;它。从此以后。this.comment_null

推荐阅读