cod*_*ter 2 html javascript dom frameworks 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)时,它将返回一个没有引用的元素
这是文档,但他们不说为什么应该使用wire over string.
谢谢你的帮助
只是想...会定义更好用吗？就像是:
hyperHTML.define(numberListItem, num => `<li>${num}</li>`)
hyperHTML.bind(document.getElementById('root'))`
<h1>Hello, world!</h1>
${ data.map( num => ${{numberListItem: num}}) }
`;
但现在你要填写每个小元素的名称空间:(
您的问题中的主要问题是示例本身:一个基元列表,在本例中为数字,用作通用元素内容.
这不是一个如此常见的现实世界用例,其中数字来自数据,数据是微弱的可引用的.
但是,如果它只是一个你希望作为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}>`
由于以下原因,您无法创建任何字符串:
因此,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只有在表示解析值的方法时,该方法才有意义.
使用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在野外注入.
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绑定节点.