javascript - hyperHTML电线与字符串

我开始使用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)时，它将返回一个没有引用的元素

这是documentation，但他们没有说出为什么应该在电线上使用金属丝。

谢谢你的帮助

编辑:

只是在想.. define会更好用吗？就像是:

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

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

但是现在您将填充每个小元素的 namespace :(

最佳答案

您问题中的主要问题是示例本身:
原始列表，在这种情况下为数字，用作通用元素内容。

在现实世界中，情况并非如此，数字来自数据，而数据几乎不可指。

但是，如果恰好是要作为LI元素注入(inject)的几个数字的列表，则hyperHTML允许您执行此操作，如果仅此而已，就可以解决。

现在让我尝试解释您的问题:

为什么电线更好？

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

文本，会自动为您清除

属性，包括事件

可以延迟解析的元素的部分部分

您可能希望/需要使用hyperHTML功能将元素创建为一次性操作。

表单，输入，按钮，图像，如果要快速创建DOM元素，则可以通过hyperHTML进行操作，因为它不会锁定您，而是选择启用的抽象/库。

这就是为什么您可以将特定的数据对象与导线相关联，但也可以简单地使用不带引用的导线:可以快速进行原型(prototype)制作或进行少量更改。

现在，让我向您展示一些(缩减的)功能列表中的示例。

要点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()时，标题将按预期显示。

这样，自动清理的布局便成为了一次性布线的好处。

第2点:属性

考虑这种情况:

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

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

该值可能包含不需要的字符，因此输出可能会失败

禁用属性将存在，无论您传入什么，
输入将被禁用

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>`;

上面的示例将从端点获取星标/费率，并在解决后将其显示在适当的位置。

解决费率后，布局将被填满。

关于您的编辑

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

使用Array作为定义键实际上是，而不是最好的方法。

如果您需要反复更新相同的data，则可以将该数据用作引用，并通过密钥作为ID。

键/ ID可以是数据的索引，可以是信息，但与当前列表项无关，
或其他更独特的内容(例如书名)或更通用的数据基本内容(假设它是唯一的)。

然后，您的初始代码如下所示:

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

wire()签名确实可以接受您想要与某些布局相关的引用对象，
以及布局类型和/或其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对类固醇的关键概念。

映射您自己的电汇

如果以上机制都不满足您的要求，则您可以随时创建自己的导线并根据需要使用它们。

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]) }
`;

在上面的eaxample中，您甚至可以data.sort()并仍然获得正确编号的正确LI。

实际用例

希望您同意最常见的情况是信息来源，
您的data数组通常是一个对象数组，即使并非总是如此。

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

在这种情况下，您只需要连接书籍信息，就可以使其他所有内容按预期工作，而不会浪费节点或在野外注入(inject)LI。

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绑定(bind)的节点。

关于javascript - hyperHTML电线与字符串，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47830075/