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

我刚刚开始使用hyperHTML。我正在构建一个需要路由的小应用程序，所以我将它与hyperhtml-app结合在一起。使用hyperHTML和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('/');

来源

2017-09-02 qubyte

如果打下来，请留下评论，我会澄清问题，如果我可以。 – qubyte

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

只有当您不希望路由器正常工作时，您实际上需要防止默认设置。

我创建了一个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}`);

如果您有任何其他问题，请不要犹豫，问。

关注

来源

2017-09-02 12:50:17

啊！所以它为我捕获导航的东西。感谢您解决这个问题！：d – qubyte

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

回答

相关问题