0

I am trying to set the dynamic id of a component within a component.

So the child component has a bindable uniqueId property. The parent component has its own uniqueId which I am trying to keep into the child component's uniqueId, as such sort of following BEM convention:

<text-input-editor repeat.for="boxSide of boxSides"
   uniqueId.bind="box-editor-${uniqueId}__${boxSide}-input"></text-input-editor>

But this gives me the following error: unconsumed token { (abridged).

I tried with using the <let></let> element as in https://aurelia.io/docs/templating/custom-elements#declarative-computed-values but that didn't work either.

I am not sure how to do this in the view, as I would rather not handle this at the controller's level (this is just one of many components in that view).

Moustachiste
  • 412
  • 4
  • 14

2 Answers2

1

Assuming uniqueId has a value in your viewmodel, as the expression already has a ".bind" format, this would be:

<text-input-editor repeat.for="boxSide of boxSides"
   uniqueId.bind="'box-editor-' + uniqueId + '__' + boxSide + '-input'"></text-input-editor>

Otherwise, it could be:

<text-input-editor repeat.for="boxSide of boxSides"
   uniqueId="box-editor-${uniqueId}__${boxSide}-input"></text-input-editor>

A working version can be reviewed at:

CodeSandbox

Cristián Ormazábal
  • 1,457
  • 1
  • 9
  • 18
  • Thanks, I think I had tried the second option and it didn't work either. My problem was actually with the camelCasing of uniqueId. Moving to snakeCase fixed it. Going to post too. – Moustachiste Nov 22 '21 at 13:58
1

So I didn't try specifically Cristián Ormazábal's answer but I fixed my problem by changing uniqueId to unique-id:

<text-input-editor repeat.for="boxSide of boxSides"
  unique-id="box-editor-${uniqueId}__${boxSide}-input""
></text-input-editor>
Moustachiste
  • 412
  • 4
  • 14