个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我开始使用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}}) }
`;
最佳答案
您问题中的主要问题是示例本身:
原始列表，在这种情况下为数字，用作通用元素内容。
在现实世界中，情况并非如此，数字来自数据，而数据几乎不可指。
但是，如果恰好是要作为LI元素注入(inject)的几个数字的列表，则hyperHTML允许您执行此操作，如果仅此而已，就可以解决。
现在让我尝试解释您的问题:
为什么电线更好？
hyperHTML提供了一种定义各种内容的方法，包括:
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()时，标题将按预期显示。
wire()`<input value=${any} disabled=${!editable} onchange=${react}>`
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方法才有意义。
Array作为定义键实际上是
，而不是最好的方法。
data，则可以将该数据用作引用，并通过密钥作为ID。
hyperHTML.bind(document.getElementById('root'))`
<h1>Hello, world!</h1>
${ data.map(
num => hyperHTML.wire(data, ':' + num)`<li>${num}</li>`
) }
`;
wire()签名确实可以接受您想要与某些布局相关的引用对象，
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
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>`;
关于javascript - hyperHTML电线与字符串，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47830075/
26
4
0
我正在尝试用 Haskell 编写实时交互式图形框架。我一直试图通过使用 Netwire 5 来处理事情，但我似乎没有很好地处理事情如何“依赖”彼此。 For example , 下面的代码应该在切换
我有一个简单的表格: Comment @error('newCommentState.body') {{ $message }}
我有这个 loading..... 组件: public function doMySubmit(){ //something slow return redirect('/');
以下代码段声明了两个具有共同依赖关系的 google/wire 初始化程序。强制只创建一个配置实例的最佳方法是什么？ 我可以将共享依赖项向下传递给 InitializeStorageHandler 函
我想用 laravel livewire 做一个 SPA，我想使用 wire:click 来触发组件中的一个功能，但它不起作用，如果代码困惑这是我第一次在这里发布并且我不确定要发布什么，请原谅这是我的
我有一个 Livewire 组件，它是一个产品过滤器。查询都可以正常工作，但有时会产生无限的请求循环。 您可以在下面的 GIF 中看到发生的情况，它是 Laravel 调试栏的捕获。我正在单击一些过滤
Livewire 如何在 上 $emit 事件更改(电线:型号) 我需要在简单的 上触发事件(从另一个组件中的 DB 获取一些数据)改变。 ... 如何观察这个模型的变化？在 VueJS 上，我们
我是一名优秀的程序员,十分优秀！