Question

绑定到状态对象的选择元素将丢失更新绑定。

我正在使用lit-html和各种路由/商店组合进行一些探索，并且遇到了这种奇怪的行为。我已经使用了create-lit-app stackblitz。

我有一个菜单，它是从store.state对象上的数组填充的。这些链接会更新商店中的currentPage属性。

导航是自我侦听商店并在与商店的currentPage相匹配时设置[active]属性。

点击事件会更新商店。一切正常。

在另一个元素（世界）中，我有一个选择框。选择框由store.state对象上的相同数组填充。如果选项与currentPage属性匹配，则设置[selected]属性。这也很好。

我还放置了两个p标签，这些标签显示currentPage出于理智或精神错乱...尚不确定。

现在，当我回到使用菜单时，状态会更改，菜单[active]会起作用，其他（hello-world）元素中的p标签也会更新。但是select元素不会更新。我可以使用select来更新状态，但是绑定到select的绑定似乎已停止一起工作。

我在搜寻了类似的问题后尝试过super.update（）和this.update（），但仍然没有选择。我想知道这是否是我的丑陋反模式的功能，或者这可能是RC错误。

class HelloWorld extends LitElement {

constructor() {
    super();
    store.subscribe(() => super.update());
}

_updatePage(e) {
  console.log(e.target.value);
  store.update(s => s.currentPage = e.target.value);
}

render() {

    return html`
  <p class="app-intro">
    Current page: ${store.state.currentPage}
  </p>
  <select @change=${(e) => this._updatePage(e)}>
    ${store.state.navItems.map(navItem => {
      return html`<option ?selected=${store.state.currentPage===navItem.page}>${navItem.page}</option>`
      })
    }
  </select>

        <p class="app-intro">
            Current page: ${store.state.currentPage}
        </p>
    `;
}

}

我希望能够从应用程序中的任何位置更新状态，并更新所有订阅者。

Answer 1

我的建议是在商店更新时在元素上设置属性，这样您的元素就不会与商店的结构紧密耦合。

否则，您可以使用this.requestUpdate()来触发更新。 update()只是生命周期回调，由LitElement在内部调用。

存储连接的选择元素绑定停止工作-这是一个错误吗？还是我的代码？

1 个答案: