问题标签 [hyperhtml]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
378 浏览

javascript - 使用 hyperHTML 和 hyperhtml-app 中的链接进行导航

我刚开始使用超HTML。我正在构建一个需要路由的小应用程序,所以我将它与 hyperhtml-app 结合使用。

我正在尝试在视图上设置点击处理程序以处理对锚元素的点击并让它们与路由器一起导航。以下工作,但它似乎令人费解,我认为我错过了更好的方法来做到这一点。你能推荐一个更好的方法吗?

0 投票
2 回答
215 浏览

javascript - 使用 hyper.Component 时访问 DOM

使用时,只需使用orHyperHTMLElement就可以访问组件的内容,因为它是一个元素。this.childrenthis.querySelector()

但是我在使用时如何实现类似的行为hyper.Component

我想到的假设示例来自 React 文档:https ://facebook.github.io/react/docs/refs-and-the-dom.html - 我想将特定节点集中在我的 DOM 中。

我有一个 codepen 沙箱,我正在尝试解决这个问题:https ://codepen.io/asapach/pen/oGvdBd?editors=0010

这个想法是每次都render()返回相同的,所以我可以在返回之前保存它并稍后访问它:Nodethis.node

但这在我看来并不干净。有一个更好的方法吗?

0 投票
1 回答
406 浏览

ecmascript-6 - hyperHTML:循环中的通用内容始终呈现完整并失去它的绑定(点击事件)

我在使用 hyperHTML 时遇到了一些问题(也许只是一些理解问题)。

当我在循环中有动态内容时,内容会完全呈现并失去它的绑定(例如document.body.innerHTML = content,这不是 hyperHTML 的想法,不是吗?)。请看下面我的例子:

第一次button2点击内容被渲染。初始绑定仍然有效。再次呈现内容后,听众会丢失。

另一方面,Test Button不会再次渲染。绑定仍然存在。

有人可以向我解释一下,如何通过迭代列表以正确的方式使用 hypeHTML。

谢谢, 马蒂亚斯

0 投票
1 回答
238 浏览

javascript - 如何在 hyperHTML 中重新实现 material.io 组件?

我正在查看这个关于 material.io 组件如何与 React 组件实现/集成的 React 示例:

https://github.com/material-components/material-components-web/blob/master/framework-examples/react/src/Checkbox.js

我想知道如何对 hyperHTML 做同样的事情,因为在hyper.ComponentlikecomponentDidMountcomponentWillUnmount.

据说我可以在render调用后执行此操作,但这通常是从组件外部调用的。

0 投票
1 回答
279 浏览

javascript - hyper.Component 中的条件渲染不更新 DOM

我想知道为什么下面的代码片段没有更新 DOM

我希望它会首先呈现 textField,然后单击以呈现 p 元素。我可以看到进行了渲染调用,但结果元素并未最终出现在 DOM 中。

0 投票
2 回答
278 浏览

hyperhtml - 重复元素上的​​事件处理程序

我是 hyperHTML 的新手,正在试验它。这是我的问题。如何为重复的模板元素添加事件处理程序。这是我的网络组件:

我想在重复选项卡中添加一个单击处理程序并将 tabSelected 注册为处理程序。我添加的点击处理程序引发了一个未捕获的语法错误:

0 投票
2 回答
195 浏览

javascript - AFrame 内容无法在具有 hyperHTML 的 Chrome 上呈现

A-Frame 内容在 FireFox 和 Safari 上呈现时不会在 Chrome 上呈现。

根据CodePen 这里 const { hyper, wire } = hyperHTML;

我确定我遗漏了一些东西,相同的内容在所有浏览器(CodePen)中都呈现为静态 HTML。

0 投票
1 回答
61 浏览

javascript - 节点之间的部分输出怎么做?

阅读 hyperHTML 的功能时,有一件事引起了我的注意:

  • 节点间的部分输出

我正在尝试将一组附加元素呈现给document.body,因此不删除在 html 文件中定义的现有元素。一个声明式渲染,它将添加元素数组并在发生更改时更新元素。

0 投票
2 回答
257 浏览

javascript - 带有超 HTML 的动画

我正在尝试将 CSS 动画与进入 DOM 的 hyperHTML 元素结合起来。我的第一个想法是使用“onconnected”事件,但这种方法存在时间问题。而且这样做感觉不对 - 特别是如果我需要添加一个 setTimeOut 来使它工作。

参见Code Pen,例如带有 'onconnected' 和 setTimeout。

有没有人在处理 CSS 动画/过渡和 hyperHTML 方面有经验?我很想看到或听到想法和最佳实践。

0 投票
1 回答
76 浏览

hyperhtml - 访问 hyperHTML 模板中继器中的特定元素

有没有办法访问线图中的特定元素?

我将如何访问 returnClass() 中的节点?

有没有更好的方法通过使用线 ID 和弱引用来做我想做的事?