我刚开始使用超HTML。我正在构建一个需要路由的小应用程序,所以我将它与 hyperhtml-app 结合使用。
我正在尝试在视图上设置点击处理程序以处理对锚元素的点击并让它们与路由器一起导航。以下工作,但它似乎令人费解,我认为我错过了更好的方法来做到这一点。你能推荐一个更好的方法吗?
import hyper from 'hyperhtml';
import hyperApp from 'hyperhtml-app';
const app = hyperApp();
class Welcome extends hyper.Component {
render() {
return this.html`
<h1>Welcome</h1>
<a href="/settings" onclick=${this}>settings</a>
`;
}
onclick(e) {
if (e.target instanceof HTMLAnchorElement) {
e.preventDefault();
app.navigate(e.target.attributes.href.value);
}
}
}
class Settings extends hyper.Component {
render() {
return this.html`<h1>Settings</h1>`;
}
}
app.get('/', () => hyper(document.body)`${new Welcome()}`);
app.get('/settings', () => hyper(document.body)`${new Settings()}`);
app.navigate('/');