EJS combines data and a template to produce HTML. Here, our example data has a title and a list of supplies.

Like ERB, JavaScript between “% %” is executed. JavaScript between “%= %” adds HTML to the result.

Type HTML or JavaScript in the template
Watch as your changes update the result.

Add Title

Insert "<h1> < %= title %> </h1>" 

Add Link

Insert "< %= link_to(supplies[i], 'supplies/'+supplies[i]) %>" between the <li> tags </li>

Add Images

Insert "< %= img_tag('maid.jpg') %>" 

The result on the right is the output of the template processed with the data.

If you make a mistake, EJS provides the line number and a message for easier debugging.

Highlights.

* HTML string concatenation without the messiness.
* Easily load templates from separate files.
* Rails-like view helpers.
* Template caching and partials.
* Intelligent error handling with line numbers.
* FF 1.5+, IE 6+, Opera 9, Safari 3.
* MIT license.

Syntax.

// load a template file, then render it with data
html = new EJS({url: '/template.ejs'}).render(data)

// update element 'todo' with the result of a
// template rendered with data from a JSON request
new EJS({url:'/todo.ejs'}).update('todo','/todo.json')

Demo: http://embeddedjs.com/
Download: http://embeddedjavascript.googlecode.com/files/ejs_0.9_alpha_1_developer.zip
Source: http://embeddedjs.com/

Related Listings:

1. A Javascript News TickerTape Component This component vertically scrolls a number of items within a...
2. Online Javascript Code Beautifier This beautifier can process your messy or compacted javascript, making...
3. MochiKit to Reduce Javascript Code MochiKit is a highly documented and well tested, suite of...
4. Write ExtJS code in C# I really love Ext but coding in javascript just...
5. Javascript Calendar Using MooTools The idea is to use MooGenda to quickly expose your...

Do you like this post?

Email: