Simple SPA base configurantion with Page.js, Mustache.js and Jquery.
Installation
npm i blots
import blots from 'blots'
const html = document.querySelector('body')Need to add a .htaccess file to the project
<IfModule mod_rewrite.c>
Options +FollowSymLinks
RewriteEngine On
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^.*$ ./index.html
</IfModule>
In the html file add the tag <base href="/"> inside the <head>
<html>
<head>
<base href="/">
</head>
<body></body>
</html>
blots.route('/', (ctx, next) => {
html.appendChild(blots.createElement(`
<H1>Hello World!</H1>
`))
})Using url paramiters
blots.route('/user/:name', (ctx, next) => {
html.appendChild(blots.createElement(`
<H1>Hello ${ctx.params.name}!</H1>
`))
})Change page 404 not found
blots.route('*', function(ctx, next) {
html.appendChild(blots.createElement(`<p>Page not found!</p>`))
})Init routes
blots.start()Basic consiguration result
import { blots } from 'blots'
const html = document.querySelector('body')
blots.route('/', (ctx, next) => {
html.appendChild(blots.createElement(`
<H1>Hello World!</H1>
`))
})
blots.route('/user/:name', (ctx, next) => {
html.appendChild(blots.createElement(`
<H1>Hello ${ctx.params.name}!</H1>
`))
})
blots.route('*', function(ctx, next) {
html.appendChild(blots.createElement(`<p>Page not found!</p>`))
})
blots.start()Create in html file
<template id='my-tpl'>
<div>
<p>Name: Steve</p>
<p>E-mail: steve@mail.com</p>
<p>Age: 26</p>
<div>
</template>Render template
const component = document.querySelector('#my-tpl').innerHTML
blots.route('/users', (ctx, next) => {
blots.draw('#content', component) //blots.draw('target', 'html') #target = '.class' || '#id' || 'tag'
})Send json data
const component = document.querySelector('#my-tpl').innerHTML
blots.route('/users', (ctx, next) => {
blots.draw('#content', component, {
name: 'Steve',
email: 'steve@mail.com',
age: 26
})
})Get json data in html file
<template id='my-tpl'>
<div>
<p>Name: {{ name }}</p>
<p>E-mail: {{ email }}</p>
<p>Age: {{ age }}</p>
<div>
</template>List array and objects
const component = document.querySelector('#my-tpl').innerHTML
blots.route('/users', (ctx, next) => {
blots.draw('#content', component, {
users: [{
name: 'Steve',
email: 'steve@mail.com',
age: 26
},
{
name: 'Ana',
email: 'ana@mail.com',
age: 22
},
{
name: 'Jorge',
email: 'jorge@mail.com',
age: 33
}]
})
})Get List array and objects in html file
<template id='my-tpl'>
{{#users}}
<div>
<p>Name: {{ name }}</p>
<p>E-mail: {{ email }}</p>
<p>Age: {{ age }}</p>
<div>
{{/users}}
</template>import MyClass from 'myClass'
const myClass = new MyClass
blots.route('/', (ctx, next) => myClass.index(ctx, next))