1

在 lit-html 1.0.0-rc.2 中，我有以下模板，它不能正常工作。所以，我想我做错了什么。或者这只是 lit-html 中的一个错误？

import { html } from './node_modules/lit-html/lit-html.js';
import css from './css.js';

export default function template(c) {
  console.log('props', c.text, c.selected, c.checkbox, c.radioButton);
  const changeText = c.changeText.bind(c);
  return html`
    ${css()}
    <form>
      <div>input cannot be updated programatically</div>
      <input type="text" value="${c.text}" @input="${changeText}"/>

      <div>select cannot be set/changed programatically</div>
      <select @change="${ev => {c.selected = ev.currentTarget.value; console.log('value set to', ev.currentTarget.value)}}">
        <option value="" ?selected="${c.selcted === ''}">Select</option>
        <option value="1" ?selected="${c.selcted === '1'}">1</option>
        <option value="2" ?selected="${c.selcted === '2'}">2</option>
        <option value="3" ?selected="${c.selcted === '3'}">3</option>
        <option value="4" ?selected="${c.selcted === '4'}">4</option>
      </select>
      <div>checkbox cannot be updated programatically</div>
      <input
        type="checkbox"
        @change="${(ev) => {c.checkbox = ev.currentTarget.value; console.log('checkbox value:', ev.currentTarget.value)}}"
        ?checked="${c.checkbox === 'on'}"
      />
      <div>radio buttons cannot be updated programatically</div>
      <input
        name="radio"
        type="radio"
        value="1"
        @change="${ev => {c.radioButton = '1'; console.log('radio button value: ', ev.currentTarget.value)}}"
        ?checked="${c.radioButton === '1'}"/>
      <label>1</label>
      <input
        name="radio"
        type="radio"
        value="2"
        @change="${ev => {c.radioButton = '2'; console.log('radio button value: ', ev.currentTarget.value)}}"
        ?checked="${c.radioButton === '2'}"/>
      <label>2</label>
      <input
        name="radio"
        type="radio"
        value="3"
        @change="${ev => {c.radioButton = '3'; console.log('radio button value: ', ev.currentTarget.value)}}"
        ?checked="${c.radioButton === '3'}"/>
      <label>3</label>
    </form>
  `;
}

它由以下 Web 组件填充/控制：

import { render } from './node_modules/lit-html/lit-html.js';
import template from './template.js';

class MyForm extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.text = 'foo';
    this.selected = '2';
    this.checkbox = 'on';
    this.radioButton = '1';
  }

  attributeChangedCallback(name, oVal, nVal) {

  }

  connectedCallback() {
    this.render();
    setInterval(() => {
      this.text = 'foobar';
      this.selected = '3';
      this.checkbox = 'off';
      this.radioButton = '2';
      this.render();
    }, 2000);
  }

  disconnectedCallback() {

  }

  changeText(ev) {
    const { value } = ev.currentTarget;
    this.text = value;
    this.render();
  }

  render() {
    render(template(this), this.shadowRoot);
  }

  static get observedAttributes() {
    return ['']
  }
}
customElements.get('my-form') || customElements.define('my-form', MyForm);

export { MyForm }

请注意，Web 组件尝试在第一次渲染时设置各种输入的值。此后，它尝试使用 setInterval 再次设置它们。setInterval 仅用于显示 Web 组件如何尝试更新模板。

在选择的情况下，不能以编程方式设置选项。对于其他每个输入元素，一旦在 UI 中选择，就无法以编程方式更新。

4

1 回答 1

0

我不认为这是 Lit 中的错误，尽管您以一种非常独特的方式使用它。

就您而言<select>，问题是您正在设置c.selected但随后签c.selcted入每个<option>.

于 2021-05-04T20:18:09.937 回答