使用 hyperHTML 在多个地方连接全局数据的最佳方法是什么？

Question

我正在开发一个重用大量常量的应用程序。我知道我可以使用电线 ID 在多个地方使用相同的数据，但我不确定每次我想使用该数据时是否应该创建一个新的全局唯一 ID。

这是我正在使用的简化示例：

const colors = [
  {value: 'red', label: 'Red'},
  {value: 'blue', label: 'Blue'}
]

class MyElement extends HTMLElement {
  constructor() {
    super()
    this.html = hyperHTML.bind(this)
  }

  connectedCallback() {
    this.html`
      Hi, ${this.getAttribute('name')}! What is your favorite color?<br/>
      <select>
        ${colors.map(option => hyperHTML.wire(option)`<option value=${option.value}>${option.label}</option>`)}
      </select>
    `
  }

  get name() {
    return this.getAttribute('name')
  }
}

customElements.define('my-element',MyElement);

hyperHTML.bind(document.body)`
  <my-element name="Alice"></my-element>
  <my-element name="Bob"></my-element>`

我知道除非指定电线 ID，否则 option 只会出现在一个地方。我可以使用 :${this.name} 作为电汇 ID，但我必须弄清楚如果有两个同名的人，并且我想为 "What is your favorite color?" 使用一种表格，为 "What color is your shirt?"，我必须为此制作另一个唯一 ID。

有没有办法以某种方式确定电线 ID 的范围，或者我是否必须制作全球唯一的电线 ID？

Answer 1

您的逻辑中存在一个微妙的问题，您想将一组项目映射到它们自身，而不是将它们的值关联起来。

示例：您将选项对象连接到使用、情况、上下文之外，而不是将自定义元素实例连接到它用来呈现自身的某些数据。

正如您在 this CodePen example 中看到的那样，您可以简单地连接自定义元素上下文，并使选项信息唯一，就作用域 id 而言，只需通过其所有者指向其值：

hyperHTML.wire(this, `:option:${option.value}`)

此时每个节点都有一个选项元素，这样您就可以轻松地select任何您想要的东西，而不是在整个地方全局移动相同的选项节点。

实际上，全局 ID 是一种反模式，我相信，在 React 或 Vue 等所有其他键控框架中，所以......只需使用实例，作为你的线路 context/reference，并且轻松为其创建唯一 ID。

希望这能解决您的问题。

使用 hyperHTML 在多个地方连接全局数据的最佳方法是什么？

What is the best way to wire global data in multiple places using hyperHTML?

hyperhtml