将@ Polymer / app-storage与带亮元素一起使用

Question

我想将indexedDB与lit-element一起使用。为此，我在lit-element项目中导入了@ polymer / app-storage / app-indexeddb-mirror。我的代码的副本为here。data属性中的值未保存到indexedDB。没有引发错误。

@ polymer Webcomponents和lit-element之间是否存在不兼容？

Answer 1

例如：

  render() {
    return html`
      <app-indexeddb-mirror
            key="indexKey"
            data="${this.data}"
            @persisted-data-changed="${this.persistedDataChanged}">
            log
        </app-indexeddb-mirror>
    `;
  }

请注意，lit-html具有将事件侦听器绑定到element.s的不同语法，而对于Polymer模板，您可以添加一个属性，如

static get template() {
  return html`<input on-change="methodName">`
}

与lit-html一起，绑定事件侦听器的语法使用@代替on-，并且不会自动对事件名称加斜杠，因此可以使用：

html`<my-el @eventName="${referenceToFunction}"></my-el>`

其中referenceToFunction是对事件处理程序的直接引用。

还请注意，您无需创建lambda表达式即可将事件传递给实例方法，因为lit-html会自动为您绑定该函数。
话虽这么说，在更简单的情况下，请考虑使用KV-Storage，idb或idb-keyval之类的东西，因为这样一来，最终将以更少的方式向客户端交付JavaScript，因为您不必精打细算与整个Polymer库一起使用。