Aurelia dynamically bound variable with template string

Question

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).

Answer 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

Answer 2

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>