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

uqxowvwt 于 2022-11-05 发布在其他

关注(0)|答案(1)|浏览(99)

我有几个组件示例（我们称之为<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;

其在x1M5 N1 x组件中的动作x1M4 N1 x中处理：

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

其中cmd是具有以下属性的某个Ember模型：

@tracked resultComponentName = 'other-result';

现在，我只想在一个示例中更改@resultComponentName，但当我更改@resultComponentName时，所有组件<Row />示例都将重新呈现。
我怎样才能防止这种行为，并使每个示例独立？提前感谢！

1条答案

您的问题是@tracked resultComponentName;存在于Terminal组件中，因此对于整个列表只存在一次。
现在我不确定你的@rows和cmd之间的关系，因为这是一个有趣的问题。如果每一行都是cmd，你可以这样做：

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

如果不同，则完全取决于您希望如何Map哪些行、哪些resultComponentName以及您希望在何处存储这些信息。您甚至可能希望将该登录移到Row组件本身中。