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

Question

I have few instances of component (let's call it <Row />) with given template:

    {{component @resultComponentName result=@result}}

I'm calling <Row /> component from <Terminal /> component like this:

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

<Terminal /> component has property:

@tracked resultComponentName;

which is handled in action confirm() in <Terminal /> component:

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

where cmd is some Ember Model with property:

  @tracked resultComponentName = 'other-result';

now I want to change @resultComponentName in only one instance but when I am changing @resultComponentName all of the component <Row /> instances re-render.

How can I prevent that behavior and make every instance independent? Thanks in advance!

Answer 1

Your problem is that @tracked resultComponentName; exists in your Terminal component, and so only once for the entire list.

Now I'm not sure how your @rows is related to cmd here, because thats the interesting question. If each row is a cmd you could just do this:

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

If its different it totally depends how you want to map for which rows you want which resultComponentName and where you want to store that information. You maybe even want to move that login into the Row component itself.