lothus
v0.1.0
Published
Framework for fast development of single page applications
Downloads
1
Maintainers
gabrieljmjReadme
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.