Name: dual-page-app
Owner: TABLEFLIP
Description: The dream. A single page app whose initial HTML content is served from the server.
Created: 2015-07-28 16:48:31.0
Updated: 2015-07-28 16:49:33.0
Pushed: 2015-07-29 21:35:11.0
Homepage: null
Size: 144
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
server.js
app = require('express')()
dual = require('./lib/dual')(app)
post = require('./post')
etup blog post route for the server
(dual)
listen(3000) // Start app
client.js
page = require('page')
dual = require('./lib/dual')(page)
post = require('./post')
etup blog post route for the client
(dual)
() // Start app
post.js
tpl = require('./post.jade')
le.exports = function (dual) {
Attach to /post/:id
al('/post/:id', render, init)
Render the page
nction render (ctx, cb) {
var postId = ctx.params.id
// Do async IO, eventually call cb with rendered HTML
cb(null, tpl())
Initialisation for the client
nction init (ctx) {
var link = document.querySelector('a[href="#"]')
link.addEventListener('click', function (e) {
e.preventDefault()
dual.page('/post/138')
})
Create a GET request route in an express or page.js app.
Create a route handler function for GET request. It's assumed in the browser that the handler is for a page.js route and on the server it's for an express route.
The render function is passed ctx/req (depending on browser/server environment) and a callback. Once rendered it should call the callback with the rendered html. e.g.
tion render (ctx, cb) {
r itemId = ctx.params.itemId // URL params
Get data for template...
(null, '<div>' + itemId + '</div>')
The rendered HTML is either sent back from the server, or it replaces the page <body> depending on environment.
The init function is called by the handler after rendering (client side only).
Please see https://github.com/tableflip/dual-page-app/blob/master/item.js for an example.