ember.js - 如何使通过 {{component}} 帮助器独立呈现的组件

Question

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

    {{component @resultComponentName result=@result}}

我<Row />从这样的组件调用组件<Terminal />：

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

<Terminal />组件具有属性：

@tracked resultComponentName;

这是confirm()在<Terminal />组件中处理的：

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

cmd一些具有属性的 Ember 模型在哪里：

  @tracked resultComponentName = 'other-result';

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

我怎样才能防止这种行为并使每个实例独立？提前致谢！

score 1 · Accepted Answer

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

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

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

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

1 回答 1