ejs

E J S

Getting Started with EJS

Getting Started with EJSAre you ever faced with a mess of HTML string concatenations likethis?

var html = ""+data.title+""html += ""for(var i=0; i

Creating a template2.Using view helpers3.Using error handling4.When to use EJS5.

Include EJSBefore we put on the rubber gloves and get to the heavy scrubbing,lets get set up a bit.Your page needs to include EJS so your JavaScript can use it. Start bydownloading ejs_production.js from Google Code or the subversionrepository.Next add EJS to your HTML like this:

Create a TemplateThe first step towards cleaner code is separating your presentationmarkup (HTML) from your application logic (JavaScript). We'll do thisby separating our presentation markup into a separate file called atemplate. Create a file called cleaning.ejs and insert the followingcode:

You'll notice everything inside tags is executed andeverything inside tags inserts itself into the returned HTMLstring.We need to add JavaScript to control the loading and rendering of thetemplate. We'll replace the original string concatenation code with thefollowing:

EJS - JavaScript Templates http://embeddedjs.com/getting_started.html

2 de 5 08-05-2014 20:46

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

Doesn't that feel better? The template code restores HTML to itsintended structure and the JavaScript code is short and unambiguous.The dust is clear, now its time to mop.

View HelpersEJS is packaged with view helpers. View helpers are shortcuts tocommonly used display code, like links and forms. Similar to thosefound in the Ruby on Rails framework, they keep view code as short,simple, and to the point as possible.The links in our template are being constructed using somethingresembling string concatenation.

This code is still quite messy. There are enough nested tags to makeyou lightheaded. Let's tidy that up using a view helper.

This code is much cleaner and more straightforward. Remember whatbuilding the links used to look like?

html += ""html += data.supplies[i]+""

Compared to the original JavaScript, someone with little knowledge ofyour code would have a much easier time understanding the EJStemplate snippet.Now you can relax and enjoy the tingly clean sensation.

Error HandlingA good maid always admits her mistakes. If you have an error in an


3 de 5 08-05-2014 20:46

EJS template, EJS will point out the exact line number the erroroccurred on. All you have to do is include ejs_jslint.js, which you candownload at Google Code. If you're using Firebug, the FirefoxJavaScript debugger plugin, the error will appear right in yourconsole.Example broken template code:

new EJS({ url: 'comments.ejs'}).update('element_id', '/comments.json')

Pretty sweet, eh?Application skinning.3.If you want to give users the power to customize their ownlook and feel, EJS provides the perfect mechanism. EJStemplates execute in the browser only, so there is no securityrisk to your server. Allowing users to upload EJS templatesand associated stylesheets is the easiest and fastest way toskin your site.

More tipsWax on, wax off. You've learned some good techniques, but cleaningup your messy HTML isn't simple enough to teach in one tutorial. Formore info, check out these resources.

DocumentationEJS Google GroupEJS Google Code PageSVN Repository

Home Download GoogleCode Documentation Forum Contact


5 de 5 08-05-2014 20:46

ejs

Documents

Transcript of ejs