0

我正在开发一个重用大量常量的应用程序。我知道我可以使用连线 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，否则options 只会出现在一个地方。我可以:${this.name}用作电汇 ID，但我必须弄清楚如果有两个同名的人该怎么办，以及如果我想要一个表格来表示“你最喜欢的颜色是什么？” 另一个是“你的衬衫是什么颜色的？”，我必须为此制作另一个唯一的 ID。

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

4

1 回答 1

1

您的逻辑中有一个微妙的问题，您希望将一组项目映射到它们自身，而不是将它们的值上下文化。

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

正如您在此 CodePen 示例中所见，您可以简单地连接自定义元素上下文，并根据作用域 id 使选项信息唯一，只需通过其所有者指向其值：

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

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

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

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

于 2018-01-06T20:43:22.957 回答