Rendered template

This is the template as rendered by Set, along with the Set source, showing the HTML, the data object, and the Express 3 router in node.js. All the other examples render to exactly the same output.

Set template

This is the template in Set. Unlike the Handlebars example, the template looks almost identical to the final render and can be used to design in the browser. You can even add dummy data (like the second and third list items) which are not included in the final render. Unlike the Plates example, no mapping code is necessary. Data is mapped automatically to the HTML elements.

A placeholder title

Hello from name of the templating engine!

This paragraph is a placeholder.

This should link to Aral’s homepage.

This should link to Ind.ie.

This should be Aral’s headshot:

Friends and their skills

Name knows skills.
Some sample content.
That could help when styling the page.

No friends found.

HTML

<h1 data-set-text='title'>A placeholder title</h1>

<p>Hello from <span data-set-text='name'>name of the templating engine</span>!<p>

<!-- Text substitution -->
<p data-set-text='content'>This paragraph is a placeholder.</p>

<!-- Attribute substitution -->
<p><a data-set-attribute='href newURL' href='/'>This should link to Aral’s homepage.</a></p>

<!-- Custom Formatter -->
<p><a data-set-attribute='href correctURLFragment fullURL' href='http://aralbalkan.com'>This should link to Ind.ie.</a></p>

<p>This should be Aral’s headshot:</p>

<!-- Placeholder image -->
<img data-set-attribute='src aralImageURL' src='http://placehold.it/600x600'>

<h2>Friends and their skills</h2>

<!-- Conditional -->
<ul data-set-if='friends'>
  <!-- Repeater -->
  <li data-set-repeat='friend friends'>
    <p><span data-set-text='friend.name'>Name</span> knows <span data-set-text='friend.skills'>skills</span>.</p>
</li>

  <!-- Dummy data -->
  <li data-set-dummy>
    <p>Some sample content.</p>
  </li>
  <li data-set-dummy>
    <p>That could help when styling the page.</p>
  </li>
</ul>

<!-- Conditional -->
<p data-set-if='not:friends'>No friends found.</p>

Data

data =
  title: 'Set sample'
  name: 'Set'
  content: 'This is a simple example to demonstrate Set, a templating engine for Express (node.js) and client‐side JavaScript.'
  newURL: 'http://aralbalkan.com'
  correctURLFragment: 'ind'
  aralImageURL: 'http://aralbalkan.com/images/aral.jpg'
  friends:
  [
    {name: 'Laura', skills: 'design, development, illustration, speaking'},
    {name: 'Jo', skills: 'operations, cognitive psychology, sports coaching'},
    {name: 'Osky', skills: 'begging for food, looking cute, occasionally howling'}
  ]

Express 3 router (node.js)

exports.route = (request, response) ->
# Custom formatter
data.__set = {
  formatters:
    fullURL: (value) ->
      return 'http://' + value + '.com'
}
response.render 'simple', data