Aurelia 使用模板字符串动态绑定变量答案

【问题标题】：Aurelia dynamically bound variable with template stringAurelia 使用模板字符串动态绑定变量
【发布时间】：2022-01-01 01:44:47
【问题描述】：

我正在尝试在组件内设置组件的动态id。

所以子组件有一个可绑定的uniqueId 属性。父组件有自己的uniqueId，我试图将其保留在子组件的uniqueId 中，如下BEM 约定：

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

但这给了我以下错误：unconsumed token {（删节）。

我不确定如何在视图中执行此操作，因为我宁愿不在控制器级别处理此问题（这只是该视图中的众多组件之一）。

【问题讨论】：

【解决方案1】：

假设 uniqueId 在您的视图模型中有一个值，因为表达式已经具有“.bind”格式，这将是：

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

否则，可能是：

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

可以在以下位置查看工作版本：

【讨论】：

谢谢，我想我已经尝试了第二个选项，但也没有用。我的问题实际上是与 uniqueId 的 camelCasing 有关。移动到snakeCase 修复了它。也要去发帖了。

【解决方案2】：

所以我没有特别尝试 Cristián Ormazábal 的回答，但我通过将 uniqueId 更改为 unique-id 解决了我的问题：

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

【讨论】：