如何使通过 {{component}} 助手呈现的组件独立

Question

我有几个具有给定模板的组件实例（我们称之为 <Row />）：

    {{component @resultComponentName result=@result}}

我正在从 <Terminal /> 组件调用 <Row /> 组件，如下所示：

{{#each @rows as |row|}}
  <Row @result={{row.result}} @confirm={{fn this.confirm}} @resultComponentName={{this.resultComponentName}}/>
{{/each}}

<Terminal /> 分量有属性:

@tracked resultComponentName;

在 <Terminal /> 组件中的操作 confirm() 中处理：

if (cmd.resultComponentName) {
  this.resultComponentName = cmd.resultComponentName;
} else {
  this.resultComponentName = 'result-component';
}

其中 cmd 是一些 Ember 模型属性:

  @tracked resultComponentName = 'other-result';

现在我只想在一个实例中更改 @resultComponentName，但是当我更改 @resultComponentName 时，所有组件 <Row /> 实例都会重新渲染。

如何防止这种行为并使每个实例独立？提前致谢！

Answer 1

您的问题是 @tracked resultComponentName; 存在于您的 Terminal 组件中，因此整个列表只存在一次。

现在我不确定您的 @rows 与此处的 cmd 有什么关系，因为这是一个有趣的问题。如果每一行都是 cmd 你可以这样做：

<Row @result={{row.result}} @confirm={{fn this.confirm}} @resultComponentName={{row.resultComponentName}}/>

如果不同，则完全取决于您要如何映射您想要的行，resultComponentName 以及您要存储该信息的位置。您甚至可能想将该登录名移至 Row 组件本身。

How to make components rendered via {{component}} helper independent