elements-lite

DOM buildel for browser

@version    0.7.0
@date       2015-05-22
@stability  1 - Experimental

Elements –

Syntax follows CSS Selectors where possible.

<script src=elements-lite.js></script> should place inside body.

El("div", "test").to(document.body)
//<div>test</div> 
 
El("a#link[href='/home']", "Home").to(document.body)
//<a id="link" href="/home">Home</a> 
 
El("a", {id:"link", href:"/home"}).append("Home").to(document.body)
//<a id="link" href="/home">Home</a> 
 
El(".custom", "test").to(document.body)
//<div class="custom">test</div> 

It is a template engine inspired by Haml but uses CSS selectors like syntax for describing elements and attributes.

By default, text at the start of a line (or after only white space) represents an html tag. Indented tags are nested, creating the tree like structure of html.

ul
  li Item A
  li Item B

becomes

<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>

From CSS Class selectors, ID selectors, Pseudo-classes selectors and Attribute selectors 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>

To save space you can use an inline syntax for nested tags.

a>i text

becomes

<a><i>text</i></a>
ul.list
  @template my-row
    li.my-row > b row
  my-row
  my-row
  / Comment

becomes

<ul class="list">
  <li class="my-row"><b>row</b></li>
  <li class="my-row"><b>row</b></li>
</ul>
ul[data-bind="class: 'red', list.count > 5; each: row in list"]
  li[data-bind="txt: row"]

.. is equal to

ul &class: "red", list.count > 5; each: row in list
  li[data-bind="txt: row"]

Add custom bindings

El.bindings.enabled = function(enabled) {
    this.disabled = !enabled
}
ul &enabled: list.count > 5
  li[data-bind="txt: row"]

It should work IE6 and up but automated testing is currently broken.

Copyright (c) 2012-2015 Lauri Rooden <lauri@rooden.ee>
The MIT License