View Overview

View cleans the HTML out of your JavaScript with client side templates. After View gets its rubber gloves on dirty code, you'll feel organized and uncluttered.

JavaScriptMVC views were extracted into their own separate project, Embedded JavaScript (EJS), located at embeddedjs.com. Download EJS as a standalone component.

Try it!

The Data.

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

{title: 'Cleaning Supplies', supplies: ['mop', 'broom', 'duster']}

The Template.

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.

Try typing these suggestions:

Add the title Add links Add image

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

Show me »

Type here

The Result.

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

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

The result is shown here

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 View({url: '/template.ejs'}).render(data)

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