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)时，它将返回一个没有引用的元素
这是文档，但是他们没有说为什么要用线对线。
谢谢你的帮助
编辑：
只是在想.会更好地使用定义吗？类似于：
hyperHTML.define(numberListItem, num => `<li>${num}</li>`)
hyperHTML.bind(document.getElementById('root'))`
<h1>Hello, world!</h1>
${ data.map( num => ${{numberListItem: num}}) }
`;但是现在您将填充每个小元素的名称空间：
回答 1
Stack Overflow用户
发布于 2017-12-17 13:44:26
问题中的主要问题是示例本身:原语列表，在本例中是数字，用作泛型元素内容。
这不是一个很常见的真实世界用例，其中数字来自数据，而数据是弱可引用的。
但是，如果它正是您想要作为LI元素注入的几个数字的列表，那么hyperHTML允许您这样做，如果这就是您所需要的，那么就去做吧。
现在让我解释一下你的问题：
为什么电线更好？
hyperHTML为您提供了一种定义各种内容的方法，包括：
- 文本，它会自动为您消毒。
- 属性，包括事件
- 元素中可以懒散解析的部分部分
您可能希望/需要使用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}>`由于以下原因，您不能将其创建为字符串：
- 该值可能包含不需要的字符，因此输出可能会失败。
- 禁用的属性将在那里，无论传入什么，输入都将被禁用。
- 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传递。
键/it可以是数据的索引，一个与当前列表项无关的信息，也可以是一些更独特的信息，比如书名，或者假设它是唯一的，更一般地说是数据基元内容。
然后，您的初始代码将如下所示：
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使用这些原语，您可以将任何信息列表关联到特定的节点。这是关键的概念，从反应或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。
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绑定节点。
https://stackoverflow.com/questions/47830075
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号