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，但是如果有两个同名的人，我必须弄清楚要做什么，如果我想要一个表格用于＆＃34;你最喜欢的颜色是什么？＆＃34; ＆＃34;你的衬衫是什么颜色的？＆＃34;，我必须为此制作另一个唯一的ID。

有没有办法以某种方式定位线ID或者我必须制作全球唯一的ID？

Answer 1

您的逻辑中存在一个微妙的问题，您希望将一系列项目映射到自己，而不是将其值上下文化。

示例：您正在连接选项对象，不再使用，情境，上下文，而不是将自定义元素实例连接到它用于渲染自身的某些数据。

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

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

此时，每个节点都有一个选项元素，这样您就可以轻松选择所需的任何内容，而不是在整个地方全局移动相同的选项节点。

实际上，全局ID是一种反模式，我相信，它在所有其他键控框架中都是如React或Vue所以......只需使用实例，作为您的连线上下文/引用，并创建一个唯一的ID为此轻松。

我希望这能解决你的问题。

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

1 个答案: