Aurelia视图中使用模板字面量触发Lexer错误的解决方法

你遇到的错误是因为Aurelia的绑定表达式语法不支持在插值内部使用ES6模板字面量（反引号``），Lexer会把反引号识别为非法字符。以下是几种可行的修复方案：

方案1：用字符串拼接替代模板字面量 #

直接把模板字面量的语法换成传统的字符串拼接，这是最直接的修改方式：

<template bindable="num, small, medium">
    <div class="myclass__spinner ${num ? 'myclass-progress__color-' + num : ''}">
    </div>
</template>

方案2：使用Aurelia的class.bind语法（推荐） #

Aurelia提供了更清晰的class.bind绑定方式，适合处理动态class场景：

子方案2.1：对象语法（适合多条件动态class） #

通过对象键值对控制class是否生效，键是class名称，值是布尔条件：

<template bindable="num, small, medium">
    <div class="myclass__spinner" class.bind="{ 'myclass-progress__color-' + num: num }">
    </div>
</template>

这里num作为条件，当num存在时，对应的动态class会被添加。

子方案2.2：字符串拼接绑定 #

如果逻辑简单，也可以直接绑定拼接后的完整class字符串：

<template bindable="num, small, medium">
    <div class.bind="'myclass__spinner ' + (num ? 'myclass-progress__color-' + num : '')">
    </div>
</template>

内容的提问来源于stack exchange，提问作者sleb