Skip to content

Instantly share code, notes, and snippets.

@zaiste
Last active June 5, 2017 21:45
Show Gist options
  • Select an option

  • Save zaiste/3a84a662584b8c1d4f72c308e9207a22 to your computer and use it in GitHub Desktop.

Select an option

Save zaiste/3a84a662584b8c1d4f72c308e9207a22 to your computer and use it in GitHub Desktop.
Marko client-side routing & Node.js backend using Huncwot

Marko client-side routing & Node.js backend using Huncwot

This is the initial page index.marko

<init-app/>
<!doctype html>
<html>
<head>
    <title>Marko + Huncwot Example</title>
    
    <include-stylesheets/>
</head>
<body>
  <main/>
  <include-javascripts />
</body>
</html>

This is the the root component at componenents/main/index.marko

import { Router } from 'marko-path-router';
import axios from 'axios';

class {
  onMount() {
    const routes = [
      { path: '/', component: require('../home') },
      { path: '/click-count', component: require('../click-count') },
    ]

    const render = Router.renderSync({
      routes,
      initialRoute: '/'
    })


    render
      .appendTo(this.getEl('router-container'))
      .getComponent()

  }
}
import { Router } from 'marko-path-router';
class {
onMount() {
const routes = [
{ path: '/', component: require('../home') },
{ path: '/click-count', component: require('../click-count') },
]
const render = Router.renderSync({
routes,
initialRoute: '/'
})
render
.appendTo(this.getEl('router-container'))
.getComponent()
}
}
style {
}
<section class="hero is-medium is-dark">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title">
Hello, I'm Huncwot
</h1>
<h2 class="subtitle">
A modern Node.js framework designed for programmer happiness.
</h2>
</div>
</div>
<div class="hero-foot">
<nav class="tabs is-boxed is-fullwidth">
<div class="container">
<ul>
<router-link path='/'>Home</router-link>
<router-link path='/click-count'>Here be dragons!</router-link>
</ul>
</div>
</nav>
</div>
</section>
<section class="section">
<div class="container">
<div no-update key='router-container'>
</div>
</div>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment