HTML Templates

Elfenben comes with templating functionality that can be used to produce dynamic html. Below you will find the various template forms that can be used to define your templates as well as an example.

template

template takes a name and a list of arguments to be passed to the template as the second argument. The rest of the arguments are string expressions that make up the template. Template returns a compiled template function with the given name which you must call with the arguments to expand the template.

(template name (argument expression) (string expressions) ... )

template-repeat

template-repeat takes an array as its first argument and the rest are string expressions that form the template. The template is iterated over for every element of the array and the combined expanded template is returned. Within the template you can access the current element as 'elem' and the current index as 'index'. Note that while 'template' returns a compiled template, 'template-repeat' returns the actual expanded string.

(template-repeat (array expression) (string expressions) ... )

template-repeat-key

template-repeat-key takes an object as its first argument and the rest are string expressions that form the template. The template is iterated over for every key value pair of the object and the combined expanded template is returned. Within the template you can access the current value as 'value' and the current key as 'key'. Note that while 'template' returns a compiled template, 'template-repeat-key' returns the actual expanded string.

(template-repeat-key (object expression) (string expressions) ... )

HTML 5 Example

(include "html.elf")

(template page (title links)

(html {lang:"en"}

(head

(title title)

(script {type:"text/javascript", src:"js/test.js"}))

(body

(div {class:"navigation"}

(ul

(template-repeat links

(li "<a href=\"" elem.href "\">" elem.text "</a>"))))

(h1 "HTML Templates")

(p "Welcome to Elfenben HTML templates!"))))

(console.log

(page

"My Home Page"

[{href:"/about", text:"About"},

{href:"/products", text:"Products"},

{href:"/contact", text:"Contact"}]))