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

Posted 2023-03-28

【中文标题】Aurelia 使用模板字符串动态绑定变量

【英文标题】：Aurelia dynamically bound variable with template string

【发布时间】：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 （删节）。

我尝试在https://aurelia.io/docs/templating/custom-elements#declarative-computed-values 中使用<let></let> 元素，但这也不起作用。

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

【参考方案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>

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

CodeSandbox

【讨论】：

谢谢，我想我已经尝试了第二个选项，但也没有用。我的问题实际上是与 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>