0

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

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

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

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

点击事件更新商店。这一切都很好。

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

我还放了几个 p 标签，它们显示 currentPage 的理智...或精神错乱...尚不确定。

现在，当我返回使用菜单时，状态会发生变化，并且菜单 [active] 正在工作，另一个 (hello-world) 元素中的 p 标签更新也是如此。但是，选择元素不会更新。我可以使用 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>
    `;
}

}

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

4

1 回答 1

1

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

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

于 2019-03-09T15:31:59.800 回答