在 HTML 中使用模板文字时出现意外的字符词法分析器错误

Question

我使用模板文字来参数化 HTML 中的类名：

<div class="myclass__spinner ${num ? `myclass-progress__color-${num}` : ''}">

这是 Aurelia 视图：

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

可绑定参数“num”被传递到视图，并根据它定义类。

但是，我在浏览器控制台中收到以下错误：

aurelia-binding.js:2551 Uncaught (in promise) Error: Lexer Error: Unexpected character [`] at column 6 in expression [num ? `myclass-progress__color-${num}` : '']
    at Scanner.error (aurelia-binding.js:2551:1)
    at Scanner.scanToken (aurelia-binding.js:2383:1)
    at Lexer.lex (aurelia-binding.js:2299:1)
    at new ParserImplementation (aurelia-binding.js:2713:1)
    at Parser.parse (aurelia-binding.js:2701:1)
    at TemplatingBindingLanguage.parseInterpolation (aurelia-templating-binding.js:753:1)
    at TemplatingBindingLanguage.inspectAttribute (aurelia-templating-binding.js:627:1)
    at ViewCompiler._compileElement (aurelia-templating.js:2214:1)
    at ViewCompiler._compileNode (aurelia-templating.js:2030:1)
    at ViewCompiler._compileNode (aurelia-templating.js:2052:1)

如何解决这个问题？

Answer 1

我不知道 Aurelia，但在直接的 Javascript 中，您需要将后面的刻度移到字符串的外部，并更改连接第二个数字的方式。

字符串需要是：

<div class=`myclass__spinner ${num ? 'myclass_progress__color_'+num : ''}`>