hyperHTML 线与字符串

Question

我开始使用 hyperHTML 有一个问题

从

开始

const data = [1,2,3]

使用电线

hyperHTML.bind(document.getElementById('root'))`
  <h1>Hello, world!</h1>
  ${ data.map( num => hyperHTML.wire()`<li>${num}</li>`  ) }
`;

使用字符串

hyperHTML.bind(document.getElementById('root'))`
  <h1>Hello, world!</h1>
  ${ data.map( num => `<li>${num}</li>`) }
`;

为什么电线更好？

当 wire 没有 "id" (obj,string) 时它将 return 一个没有引用的元素

这是 documentation 但他们没有说明为什么应该使用电线而不是字符串。

感谢您的帮助

编辑：

只是在想.. define 会更好用吗？类似于：

hyperHTML.define(numberListItem, num => `<li>${num}</li>`)

hyperHTML.bind(document.getElementById('root'))`
  <h1>Hello, world!</h1>
  ${ data.map( num => ${{numberListItem: num}}) }
`;

但是现在你要填写每个小元素的名称 space :(

Answer 1

您问题中的主要问题是示例本身：基元列表，在本例中为数字，用作通用元素内容。

这不是一个很常见的 real-world 用例，其中数字来自数据，而数据是弱引用的。

但是，如果它正是您想要作为 LI 元素注入的几个数字的列表，hyperHTML 允许您这样做，如果这就是您所需要的，去吧。

现在让我试着解释一下你的问题：

为什么电线更好？

hyperHTML 为您提供了一种定义各种内容的方法，包括：

文本，自动为您清理
属性，包括事件
可以延迟解析的部分元素

您可能 want/need 使用 hyperHTML 功能来创建元素作为 one-off 操作。

一个表单，一个输入，一个按钮，一张图片，如果你想快速创建一个 DOM 元素，你可以通过 hyperHTML 来实现，因为它不会把你锁在里面，这更像是一个 opt-in abstraction/library.

这就是为什么您可以将特定数据 object 与连线相关联，但您也可以简单地使用不带引用的连线：快速原型制作或少量更改都可以。

现在让我向您展示该（简化的）功能列表中的几个示例。

第 1 点：文字

如果您有一个书名列表而不是纯数字，您的无线代码会生成什么？

const data = [
  'hyperHTML is the best',
  '<HTML> 5 Best Practices'
];
// without wire
hyperHTML.bind(document.body)`
  <h1>List of books:</h1>
  <ul>
  ${data.map( text => `<li>${text}</li>` )}
  </ul>`;

答案是第二本书会由于 <HTML> 标签而导致布局问题，而使用 wire() 标题将按预期显示。

自动清理布局是 one-off 线的一个好处。

第2点：属性

考虑这个案例：

wire()`<input value=${any} disabled=${!editable} onchange=${react}>`

由于以下原因，您无法将其创建为字符串：

该值可能包含不需要的字符，因此输出可能会失败
disabled 属性将在那里，无论您传入什么，输入将被禁用
永远不会按预期设置 onchange 事件

因此，wire()... 是一种更方便的创建元素的方法。

第3点：偷懒内容

const data = [
  'hyperHTML is the best',
  '<HTML> 5 Best Practices'
];
// without wire
hyperHTML.bind(document.body)`
  <h1>List of books:</h1>
  <ul>
  ${data.map(title => `<li>
    ${title}
    ${fetch(`/books-info.php?title=${encodeURIComponent(title)}`)
      .then(b => b.json())
      .then(info => info.stars)
      .catch(err => 'not available')}
  </li>`)}
  </ul>`;

以上示例将从一个端点获取 stars/rates，并在解决后将它们显示在适当的位置。

布局将在费率得到解决后填满。

关于您的编辑

仅当您表示一种解析值的方法时，define 方法才有意义。

使用 Array 作为定义键确实不是最好的方法。

如果您需要反复更新相同的 data，您可以使用该数据作为参考并将密钥作为 ID 传递。

Keys/IDs 可以是数据的索引，是一个与当前列表项无关的信息，或者更独特的东西，比如书名，或者更笼统地说，数据原始内容，假设它是独一无二的。

您的初始代码将如下所示：

hyperHTML.bind(document.getElementById('root'))`
  <h1>Hello, world!</h1>
  ${ data.map(
    num => hyperHTML.wire(data, ':' + num)`<li>${num}</li>`
  ) }
`;

wire() 签名确实是接受参考 object 你想与某些布局相关，还有一个布局类型 and/or 它的 id.

这些都是有效的调用：

wire()
wire(info)              // info => (html default) node
wire(info, 'html')      // info => html node
wire(info, 'svg')       // info => svg node
wire(info, ':uid')      // info => (html default) node mapped as uid
wire(info, 'html:uid')  // info => html node mapped as uid
wire(info, 'svg:uid')   // info => svg node mapped as uid

使用这些原语，您可以将任何信息列表与特定节点相关联。这是来自 React 或 Vue 的关键概念。

映射你自己的电线

如果none上述机制满足您的要求，您可以随时创建自己的电线并随意使用它们。

const data = [1,2,3];
const wires = data.reduce(
  (w, num) => {
    w[num] = wire()`<li>${num}</li>`;
    return w;
  },
  {}
);
hyperHTML.bind(document.getElementById('root'))`
  <h1>Hello, world!</h1>
  ${ data.map( num => wires[num]) }
`;

在上面的示例中，您甚至可以 data.sort() 并仍然获得正确数字的正确 LI。

Real-world 用例

我希望你同意最常见的情况是信息来源，您的 data 数组经常是 object 的数组。

const data = [
  {title: 'a book', author: 'an author'},
  {title: 'another book', author: 'another author'}
];

在这种情况下，您只需连接书籍信息，让其他一切按预期工作，而不会破坏节点或随意注入 LIs。

const {bind, wire} = hyperHTML;
bind(document.body)`
  <h1>List of books:</h1>
  <ul>
  ${data.map(book => wire(book)`
    <li>
      <strong>${book.title}</strong>
      by ${book.author}
    </li>
  `)}
  </ul>`;

我希望现在清楚为什么任何人、任何图书馆或第三方项目都可以从 hyperHTML 连线中受益，无论渲染位是否是 hyperHTML 绑定节点。

hyperHTML 线与字符串

hyperHTML wire vs string

html

javascript

dom

frameworks

hyperhtml

编辑：