❤
npm
Sign UpSign In

lothus

0.1.0 • Public • Published

Framework for fast development of single page applications

Installation

Include Lothus file

<script src="lothus.bundled.min.js"></script>

Usage

Each page element is a part of your system. In this element, you indicate the route, page title, data provider and events. The page content can be inside the tag or in another HTML file.

See the examples below:

<body>
  <page
    name="hello"
    route="hello/:name"
    default>
    <h1>Hello, { _params.name }</h1>
  </page>
 
  <script src="lothus.bundled.min.js"></script> 
 
  <script>
    window.onload = () => {
      const app = new Lothus();
 
      app.init();
    };
  </script> 
</body>

will print

// http://domain.com/#hello/Mano
Hello, Mano!

Routing

Use the attribute route. To indicate a parameters, use : before it and to access them, use _params.

<page name="hello" route="hello/:from/to/:to">
  { _params.from } said hello to { _params.to }
</page>

Data binding

Lothus uses Rivets data binder

It's possible to create data providers with real-time updated data and pass them to pages.

First, create a provider before initialize

app.providers.userData = {
  name: 'Gabriel',
  nickname: 'gabrieljmj'
};

then indicate the provider in the page

<page ... data-provider="userData">
  Name: { name }, Nickname: { nickname }
</page>

Accessing Rivets

To do stuff like add binders, access the property dataBinder

const app = new Lothus();
 
app.dataBinder.binders['custom-binder'] = (element, value) => {
  // ...
};

Importing page

The HTML does not need to be inside page, you can import from a extern file using origin. This helps keep the code orgaized.

<!-- hello.html -->
Hello, { _params.name }!
<!-- index.html -->
<page name="hello" route="hello/:name" origin="hello.html"></page>

Events

onload

Executed everytime that a page is loaded.

Add the event to {app|lothus}.events and put the event name in onload attribute. The event this will be the page element.

app.events.onHelloLoad = params => {
  // 'this' is the page element
};
<page ... onload="onHelloLoad"></page>

onunload

Executed everytime that a page is changed by another.

app.events.onHelloUnload = () => {
  // 'this' is the page element
};
<page ... onunload="onHelloUnload"></page>

License

This library is under MIT Licesne.

Dependents (0)

Package Sidebar

Install

npm i lothus

Repository

github.com/gabrieljmj/lothus

Homepage

github.com/gabrieljmj/lothus#readme

Weekly Downloads

1

Version

0.1.0

License

none

Last publish

Collaborators

  • gabrieljmj
Try on RunKit
Report malware