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

标签 javascript hyperhtml

我刚刚开始使用 hyperHTML。我正在构建一个需要路由的小应用程序,因此我将其与 hyperhtml-app 结合起来。

我正在尝试在 View 上设置单击处理程序来处理 anchor 元素上的单击并让它们使用路由器进行导航。以下内容有效,但似乎很复杂,我认为我缺少更好的方法来做到这一点。您能提出更好的方法吗?

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('/');

最佳答案

路由器的目的是为您处理导航。

实际上,只有当您不希望路由器工作时,您才需要阻止Default。

我创建了一个 Code Pen example这会显示您完全相同的代码,甚至根本不需要点击。

最后一点,如果您想保留之前页面的状态,您可能应该对它们进行一次处理,然后在每次渲染时重复使用它们。

const page = {
  welcome: new Welcome,
  settings: new Settings
};

app.get('/', () => hyper(document.body)`${page.welcome}`);

app.get('/settings', () => hyper(document.body)`${page.settings}`);

如果您有任何其他问题,请随时询问。

问候

关于javascript - 使用 hyperHTML 和 hyperhtml-app 中的链接进行导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46013494/

相关文章:

javascript - HTML <template> 元素与 Javascript 模板文字

javascript - 无法使用对象方法从自定义 javascript 对象数组属性获取对象

javascript - angularjs - Controller 继承调用父级

javascript - 根据窗口内部高度更改 Div 高度

javascript - 如果不指定依赖项,useEffect() 有什么意义

javascript - 如何防止响应模式下图像换行

javascript - 如何缩小Lit-HTML(包括注释)

javascript - 使用 hyper.Component 时访问 DOM