litejs

@version    0.1.7
@date       2015-02-25
@stability  1 - Experimental

LiteJS

A small pure-JavaScript web framework for building fast single-page applications.

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

• GitHub repo
• npm package
• URI Template RFC 6570

Licence

Copyright (c) 2013-2015 Lauri Rooden <[e-mail]>
The MIT License