2

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

这是文档,但他们没有说明为什么应该在字符串上使用电线。

谢谢你的帮助


编辑:

只是想..定义会更好用吗?就像是:

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

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

但是现在你会填满每个小元素的名称空间:(

4

1 回答 1

8

您问题中的主要问题是示例本身:原语列表,在本例中为数字,用作通用元素内容。

这不是一个常见的现实世界用例,其中数字来自数据,而数据的可参考性很弱。

但是,如果它只是您想要作为LI元素注入的几个数字的列表,那么hyperHTML可以让您这样做,如果这就是您所需要的,那就去做吧。

现在让我试着解释你的问题:

为什么电线更好?

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

  1. 文本,它会自动为您清理
  2. 属性,包括事件
  3. 可以延迟解析的元素的部分部分

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

一个表单、一个输入、一个按钮、一个图像,如果你想快速创建一个 DOM 元素,你可以通过hyperHTML来实现,因为它不会锁定你,它是一个可选的抽象/库。

这就是为什么您可以将特定数据对象与连线相关联,但您也可以简单地使用没有引用的连线:快速原型设计或少量更改都可以。

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

第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}>`

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

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

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

第三点:懒惰的内容

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仅当您表示一种解析值的方法时,该方法才有意义。

使用Arrayas define 键确实不是最好的方法。

如果您需要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]) }
`;

在上面的例子中,您甚至可以data.sort()并且仍然获得LI正确号码的权利。

实际用例

我希望你同意最常见的情况是信息的来源,即你的data数组,经常是一个对象数组,如果不是总是的话。

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

在这种情况下,您只需连接书籍信息,并让其他一切按预期工作,而不会破坏节点或LI在野外注入 s。

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绑定节点。

于 2017-12-17T13:44:26.757 回答