Fetching contributors…
Cannot retrieve contributors at this time
87 lines (77 sloc) 2.44 KB
<!DOCTYPE html>
<link rel="stylesheet" href="app.css">
<script id="index" type="text/tpl">
// An end-of-line comment starts with a slash
// +------------------ plugins starts with `@`
// | +------------- route, this view is accessible from #main url
// | | +-------- parent view route
// | | |
@view main body
// CSS selector declares an element, you can leave off the tag to get a div
.App.max-height>a[href=""] LiteJS Minimal Example
// Custom elements can be defined inline with 'el' plugin
@el Menu-item
&class: "selected", View(this.href.split("#")[1]).open
Menu-item[href="#home"] Home
Menu-item[href="#users"] Users
Menu-item[href="#settings"] Settings
// Subviews will be mounted here
h6 Bye
@view home main
h2 Subheader Home
p Welcome
@view settings main
h2 Subheader Settings
p You Can Set Things Up
@view users main
h2 Users
// In real application here would be data from api, not hardcoded array
ul &each: userId in ["1", "2", "3", "4", "5"]
a User {userId}
&href: "#users/" + userId
@view users/{id} main
h2 User #{} </script>
<script src="../load.js"></script>
<script src="../dist/litejs.js"></script>
// Add `#body` view, it is a starting point for us.
// It could be any element on page but we want to start from `BODY`.
View("body", document.body)
// Read in templates from element with id=index
// You must define at least one language
"en":"In English"
// Make View accessible in templates = View
View.on("show", function() {
// Blur focused link when View completes
try {
// IE8 can throw an exception for accessing document.activeElement
var el = document.activeElement
, tag = el && el.tagName
if (tag == "A" || tag == "BUTTON") el.blur()
} catch(e) {}
// Re-render all .js-viewHook elements on each View change
El.findAll(document.body, ".js-viewHook").render()
// Start a router to showing views
<noscript><h1>Error</h1>This application requires JavaScript</noscript>