用于更改 Javascript 中模板字符串中的复选框的三元代码

Question

我正在研究聚合物和光元素。在渲染函数中，我有一个模板字符串如下：

render() {
    this.todoItem = JSON.parse(this.todoItem);
    return html`
      <li>
        ${this.todoItem.item} <button @click="${this.onRemove}">Remove</button>
        <input
          type="checkbox"
          checked="${this.todoItem.done} ? 'true' : 'false'"
          @click="${this.changeStatus}"
        />
      </li>
    `;
  }

我知道这行不通，因为根据几个 Whosebug 的答案，您输入 checked 等于的任何值都会将其标记为已选中。

如果我这样做：

<input type="checkbox" ${this.todoItem.done} ? 'checked' : ''" @click="${this.changeStatus}"/>

我收到一个错误

TypeError: Failed to set the 'currentNode' property on 'TreeWalker': The provided value is not of type

Answer 1

您的三进制代码目前不是运行，它们被用于包含字符串的“”括起来。用 {} 将三元代码括起来。它会起作用。

{${this.todoItem.done} ? 'true' : 'false'}

而不是

"${this.todoItem.done} ? 'true' : 'false'"

关注此 link 了解更多详情 https://reactjs.org/docs/conditional-rendering.html

Answer 2

按照文档进行操作后，我找到了答案：我必须使用 html https://lit-element.polymer-project.org/guide/templates。以下代码有效。

render() {
    this.todoItem = JSON.parse(this.todoItem);
    return html`
      <li>
        ${this.todoItem.item} <button @click="${this.onRemove}">Remove</button>
        ${this.todoItem.done
          ? html`
              <input type="checkbox" checked @click="${this.changeStatus}" />
            `
          : html`
              <input type="checkbox" @click="${this.changeStatus}" />
            `}
      </li>
    `;
  }

更新

render() {
    this.todoItem = JSON.parse(this.todoItem);
    return html`
      <li>
        ${this.todoItem.item} <button @click="${this.onRemove}">Remove</button>
        ${html`
          <input type="checkbox" ?checked="${this.todoItem.done}" @click="${this.changeStatus}" />
        `}
      </li>
    `;
  }

更新 V2

render() {
    this.todoItem = JSON.parse(this.todoItem);
    return html`
      <li>
        ${this.todoItem.item} <button @click="${this.onRemove}">Remove</button>
        <input type="checkbox" ?checked="${this.todoItem.done}" @click="${this.changeStatus}" />
      </li>
    `;
  }

用于更改 Javascript 中模板字符串中的复选框的三元代码

ternary code to change checkbox in template string in Javascript

javascript

ecmascript-6

polymer

lit-element