Permalink
Fetching contributors…
Cannot retrieve contributors at this time
87 lines (77 sloc) 2.44 KB
<!DOCTYPE html>
<html><body>
<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
.App-row.bg-1.top.t-1>a[href="https://www.litejs.com/"] LiteJS Minimal Example
.App-row.bg-2
.Menu.js-viewHook
// Custom elements can be defined inline with 'el' plugin
@el Menu-item
a.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
.App-row
// Subviews will be mounted here
@child
.Footer-spacer
.App-row.Footer.bg-1
h6 Bye
@view home main
.page
h2 Subheader Home
p Welcome
@view settings main
.page
h2 Subheader Settings
p You Can Set Things Up
@view users main
.page
h2 Users
// In real application here would be data from api, not hardcoded array
ul &each: userId in ["1", "2", "3", "4", "5"]
li
a User {userId}
&href: "#users/" + userId
@view users/{id} main
.page
h2 User #{route.id} </script>
<script src="../load.js"></script>
<script src="../dist/litejs.js"></script>
<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
El.tpl(index.innerHTML)
// You must define at least one language
El.i18n.def({
"en":"In English"
})
// Make View accessible in templates
El.data.View = 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
history.start(View.show)
</script>
<noscript><h1>Error</h1>This application requires JavaScript</noscript>
</body></html>