简体   繁体   中英

Aurelia dynamically bound variable with template string

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:

CodeSandbox

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM