- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我开始使用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/
我刚刚开始使用 hyperHTML。我正在构建一个需要路由的小应用程序,因此我将其与 hyperhtml-app 结合起来。 我正在尝试在 View 上设置单击处理程序来处理 anchor 元素上的单
我喜欢 hyperHtml 和 lit-html 的简单性,它们使用“标记模板文字”来仅更新模板的“可变部分”。简单的 javascript,不需要虚拟 DOM 代码和推荐的不可变状态。 我想尝试尽可
当我检查由以下代码创建的 html 元素时(在 Chrome 中使用 hyperHTML,整个列表会刷新(我假设这是基于 中的所有元素短暂闪烁的紫色)。 function updateList(re
我正在尝试将 CSS 动画与进入 DOM 的 hyperHTML 元素结合起来。我的第一个想法是使用“onconnected”事件,但这种方法存在时间问题。这样做感觉不对——尤其是当我需要添加 set
此代码不起作用。 const render = ({title, tag, values}) => { bind(document.body)` ${title}
我有以下两个组件: // component.js // imports ... function ListItem(item) { const html = wire(item) funct
我们正在寻求将 HyperHTML 集成到聊天应用程序中。 目前,我们使用 moment.js 和 timeago 作为人类可读的上次聊天时间戳。聊天列表中的最后一条消息预览也经常更新,但没有时间戳那
我有以下 hyperHTML 组件,一切都按预期工作,唯一的问题是整个组件 DOM 在每次 this.setState() 调用时都会重新呈现。 我的问题: 有没有一种方法可以在不重新渲染整个组件 D
是否可以有一个自定义的 bool 属性?在 bool 属性的 hyperHTML 文档中,它声明如下: Just use boolean attributes any time you need th
我正在构建一个搜索自动建议组件,其中结果用 hyperHTML 呈现。 从服务器返回的建议的匹配字符串部分应突出显示。 我正在使用 RegEx 和 String.prototype.replace突出
我正在努力理解 HyperHTML以及如何从中获得最佳性能。 正在阅读 how it works under the hood ,这似乎暗示模板和 DOM 之间建立了牢固的联系,我认为这意味着它需要与
我正在查看这个 React 示例,了解 Material.io 组件如何实现/与 React 组件集成: https://github.com/material-components/material
在 FireFox 和 Safari 上呈现时,A-Frame 内容不会在 Chrome 上呈现。 根据 CodePen hereconst { hyper, wire } = hyperHTML;
也许我做了一些非常错误的事情,但我似乎无法让 hyperhtml-element 与 babel 很好地配合。 如果我从“hyperhtml-element”导入 HyperHTMLElement,那
我是一名优秀的程序员,十分优秀!