blots

1.1.3 • Public • Published

Blots.js

Simple SPA base configurantion with Page.js, Mustache.js and Jquery.

Dependencies

Install

Installation

npm i blots

Config

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>

Create routes

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()

Using templates and Mustache.js

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>

Using classes in routes

import MyClass from 'myClass'

const myClass = new MyClass

blots.route('/', (ctx, next) => myClass.index(ctx, next))

Package Sidebar

Install

npm i blots

Weekly Downloads

1

Version

1.1.3

License

MIT

Unpacked Size

677 kB

Total Files

8

Last publish

Collaborators

  • devvime