Ejs provides ERB style client side templates. Use them with controllers to easily build html and inject it into the DOM.

Example

The following generates a list of tasks:

<ul>
<% for(var i = 0; i < tasks.length; i++){ %>
    <li class="task <%= tasks[i].identity %>"><%= tasks[i].name %></li>
<% } %>
</ul>

For the following examples, we assume this view is in 'views\tasks\list.ejs'.

Use

Loading and Rendering EJS:

You should use EJS through the helper functions jQuery.View provides such as:

• after
• append
• before
• html,
• prepend,
• replaceWith, and
• text.

or [jQuery.Controller.prototype.view].

Syntax

EJS uses 5 types of tags:

• <% CODE %> - Runs JS Code. For example:

  <% alert('hello world') %>
  

• <%= CODE %> - Runs JS Code and writes the result into the result of the template. For example:

  <h1><%= 'hello world' %></h1>
  

• <%~ CODE %> - Runs JS Code and writes the escaped result into the result of the template. For example:

  <%~ 'hello world' %>
  

• <%%= CODE %> - Writes <%= CODE %> to the result of the template. This is very useful for generators.

  <%%= 'hello world' %>
  

• <%# CODE %> - Used for comments. This does nothing.

  <%# 'hello world' %>
  

Hooking up controllers

After drawing some html, you often want to add other widgets and plugins inside that html. View makes this easy. You just have to return the Contoller class you want to be hooked up.

<ul <%= Mxui.Tabs%>>...<ul>

You can even hook up multiple controllers:

<ul <%= [Mxui.Tabs, Mxui.Filler]%>>...<ul>

View Helpers

View Helpers return html code. View by default only comes with view and [jQuery.EJS.Helpers.prototype.text text]. You can include more with the view/helpers plugin. But, you can easily make your own! Learn how in the Helpers page.

Constructor

Creates a new view

new $.EJS(options) -> jquery.ejs