Create DOM Elements with nestable arrays that reflect the structure of HTML:
documentbody
Results in:
Blogs FunctionSource Javascript, Javascript John Resig
It all happens with one function: Creatable.create
Creatable // returns a native DOM elementCreatable;
Why?
- Switching in and out of Javascript and whatever templating language you use is ugly.
- No special templating language syntax. 100% pure Javascript.
- Implement view composition using plain, old functions.
- Properly formatted input still reflects the actual structure of HTML for readability.
Documentation
Specify ids and classes with css-syntax
Creatable
Don't forget to read this!
Document Fragments
Creatable;
First paragraph!!!"Second paragraph!!!"Third paragraph I'm bored
HTML is automatically escaped
Creatable
Something <strong>important</strong> to say.
You can unescape HTML by adding { html: true }
Creatable
Something important to say.
Highly compatible with underscore and functional programming
var links = url: "http://functionsource.com" label: "FunctionSource" url: "http://javascriptweblog.wordpress.com" label: "Javascript, Javascript" url: "http://ejohn.org/category/blog" label: "John Resig" ; var { return "li" "a" href: modelurl modellabel ;}; Creatable
FunctionSource Javascript, Javascript John Resig
Built-in support for jQuery elements
Creatable
This is a header Some text. Go, Go jQuery
Use it to return a string of HTML instead of a DOM node
var html = Creatable;console; //<a id="go" class="small button">test</a>
Unit Tests
creatable has full unit test coverage using mocha.
Installation
Just include creatable.js in your HTML: