這些是 lit-html 中的錯誤嗎？

Question

在 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 中選擇，就無法以編程方式更新。

Answer 1

我不認為這是 Lit 中的錯誤，盡管您以一種非常獨特的方式使用它。

在您的<select>的情況下，問題是您正在設置c.selected但隨后在每個<option>檢查c.selcted 。