ternary code to change checkbox in template string in Javascript

Question

I'm working with polymer and lit-element. In the render function I have a template string as follow:

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>
    `;
  }

I know this won't work because based on several stackoverflow answers, any value that you put checked equal to is going to mark it as checked.

If I do this:

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

I get an error

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

Patricio Vargas · Accepted Answer · 2019-09-07T07:05:55.180

After following the docs I found my answer: I had to use html https://lit-element.polymer-project.org/guide/templates. The following codes work.

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>
    `;
  }

UPDATE

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>
    `;
  }

UPDATE 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>
    `;
  }

score -1 · Answer 2 · answered Sep 07 '19 at 06:25

-1

your ternary codes are not running at the moment, they are enclosed by "" which are used to enclos strings. enclose the ternary code with {}. It will work.

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

instead of

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

follow this link for more detail https://reactjs.org/docs/conditional-rendering.html

answered Sep 07 '19 at 06:25

9841pratik

195
8

`````` didn't work – Patricio Vargas Sep 07 '19 at 06:30
follow the link i provided, " anything script here doesnot run". { any scrpt here runs }. remove "" enclosure. – 9841pratik Sep 07 '19 at 06:34
the problem with the link you provided is that is for react and react works with JSX. the return here is a string so the examples that say Inline If-Else with Conditional Operator in your link wont work. – Patricio Vargas Sep 07 '19 at 06:38
render() { this.todoItem = JSON.parse(this.todoItem); return html`
${this.todoItem.item}

9841pratik

Sep 07 '19 at 06:41

that doesn't work keep showing the checkbox as checked wether the value is true or false. Even if I enter ```checkbox="asdfasdfads"``` it will show the checkbox as checked because that's how they work. https://stackoverflow.com/questions/24514566/checkbox-set-to-checked-false-not-working – Patricio Vargas Sep 07 '19 at 06:49

render() { this.todoItem = JSON.parse(this.todoItem); return html`

${this.todoItem.item}

`; } – 9841pratik Sep 07 '19 at 06:50

ternary code to change checkbox in template string in Javascript

2 Answers2