Lit框架中条件绑定的事件为何无法生效？

问题原因 #

你当前的写法无效，核心问题在于错误地将Lit的事件绑定语法以字符串/TemplateResult的形式插值注入模板。Lit的@change/@input事件绑定语法需要由模板编译器直接解析，而你提前生成的evc/evi要么是普通字符串，要么是包含文本内容的TemplateResult，插入后只会被当作普通HTML属性或文本，不会被识别为事件绑定逻辑。

正确写法 #

写法1：模板内直接条件绑定事件

直接在模板中通过三元表达式控制事件绑定，当条件不满足时传递undefined，Lit会自动移除该事件绑定：

return html`${this.flabel} <input 
  .value=${this.fvalue}
  @change=${this.evchange ? this._changed : undefined}
  @input=${this.evinput ? this._changed : undefined}>`;

写法2：动态构建属性对象

通过对象动态收集需要绑定的属性和事件，再用...扩展运算符注入模板：

const inputProps = {
  '.value': this.fvalue
};

if (this.evchange) {
  inputProps['@change'] = this._changed;
}
if (this.evinput) {
  inputProps['@input'] = this._changed;
}

return html`${this.flabel} <input ...${inputProps}>`;

为什么原写法不行？ #

原代码中html@change=${this._changed}生成的是一个包含文本@change=[handler]的TemplateResult，插入到input标签后会被解析为普通的HTML属性，而非Lit的事件绑定——Lit只会处理直接写在模板字面量中的@xxx=${handler}`语法，不会解析通过字符串插值注入的事件绑定代码。

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