Framework for fast development of single page applications
Include Lothus file
<script src="lothus.bundled.min.js"></script>
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!
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>
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>
To do stuff like add binders, access the property dataBinder
const app = new Lothus();
app.dataBinder.binders['custom-binder'] = (element, value) => {
// ...
};
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>
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>
Executed everytime that a page is changed by another.
app.events.onHelloUnload = () => {
// 'this' is the page element
};
<page ... onunload="onHelloUnload"></page>
This library is under MIT Licesne.