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).
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:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.