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.