@version 0.3.2
@date 2016-01-13
@stability 1 - Experimental
LiteJS
A small pure-JavaScript web framework
for building fast single-page applications.
The main idea is to use a declarative programming
as much as possible.
- Built in templates, routes, views, translations
See a working example
with a source code
in 60 lines.
Templates
Haml-inspired template engine
that uses CSS selectors syntax for describing elements and attributes.
ul
li Item A
li Item B
becomes
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
Type selector, attribute selectors, ID selectors, and pseudo-classes
are supported.
a#123.link.bold[href="#A"][title=go] link
button:disabled
becomes
<a id="123" class="link bold" href="#A" title="go">link</a>
<button disabled="disabled"></button>
Child combinators can be used
and you can leave off the tag to get a div.
.my-class
a>i text
becomes
<div class="my-class">
<a><i>text</i></a>
</div>
Inline templates
ul
@template row
li.my-row
a > b Row
row
row
becomes
<ul>
<li class="my-row"><a><b>Row</b></a></li>
<li class="my-row"><a><b>Row</b></a></li>
</ul>
Views
Organize views into a hierarchy with built-in router.
View(name, element, parent, contentSelector)
- name
String
- A name for a view that is also a route to the view.
Accepts Level 1 URI Templates RFC 6570 - element
String
or Function
or DOM Node
-
View representation as DOM tree.
String and Function will be transformed to DOM Node on first call. - parent
String
- Parent view name. - contentSelector
String, optional
- A selector to where a child Node will be attached.
How to use
// Optional path for views, default = ""
View.base = "/js/views/"
// Define starting point in DOM
View("body", document.body)
// Create first simple view
View("home", ".home", "body")
// Create another view
View("work", ".work", "body")
// Start
View.main = "home"
history.start(View.route)
// call manualy
View("home").show()
External links
Licence
Copyright (c) 2013-2015 Lauri Rooden <lauri@rooden.ee>
The MIT License