page-router
v2.0.0
Published
Powerfully simple client-side ajax template router built on page.js.
Downloads
7
Maintainers
karissaReadme
page-router
Powerfully simple client-side ajax template router built on page.js.
index.js
var router = require('page-router');
var fs = require('fs')
var routes = [
{
url: '/',
template: '<h1>{{title}}</h1>',
data: function (params, render) {
// get data to be rendered in the template
render({
title: 'hey whats up' // this object will be available in the template
})
}
},
{
url: '/post/:id',
template: '<h1>{{post.title}}</h1>'
data: function (params, render) {
// your route to get data. do some stuff
get_post(params.id, function (err, data) {
render({ post: post })
})
},
onrender: function (params, data) {
// anything you can do with Ractive.js
console.log('hello', params.id, data.post)
}
}
]
router('#content', routes)Your index.html
<html>
<body>
<div id="content"></div>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>Using browserify
If you use browserify (recommended), you can use fs.readFileSync(template_path).toString() to load the file into the client-side javascript bundle.
Example:
var fs = require('fs')
var routes = [
{
url: '/post/:id',
template: fs.readFileSync('templates/post.html').toString()
onrender: function (params, data) {
console.log('hello', params.id, data.post)
}
]Use with gh-pages
Rename index.html to 404.html and then symlink index to 404.
ln -s 404.html index.htmlturn off auto-scroll
When you click, the router will automatically scroll to the top (see line 28 of index.js). Use scroll: false in any route definition to turn this off.
TODO
- handle 404s correctly. make the 404.html trick for gh-pages not be necessary