使用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中的鏈接導航

回答

相關問題