This is the template as rendered by Plates from the Flatiron framework. Even though the template is unobtrusive and pure HTML, Plates requires mapping code to be written, making it cumbersome and error‐prone to use. Tally requires no mapping code.
Hello from name!
This paragraph is a placeholder.
This should link to Aral’s homepage.
This should link to the Modern iOS Development workshop.
This should be Aral’s headshot:
Name knows skills.
No friends found.
<h1 id='title'>A placeholder title</h1>
<p>Hello from <span data-content="name">name</span>!<p>
<p class="target">This paragraph is a placeholder.</p>
<p><a href='/'>This should link to Aral’s homepage.</a></p>
<p><a href='http://aralbalkan.com'>This should link to the Modern iOS Development workshop.</a></p>
<p>This should be Aral’s headshot:</p>
<img data-content='photo' src='http://placehold.it/600x600'>
<h2>Friends and their skills</h2>
<ul class='friends-list'>
<li class='friend'>
<p><span class='name'>Name</span> knows <span class='skills'>skills</span>.</p>
</li>
</ul>
<p class='no-friends-warning'>No friends found.</p>
data =
title: 'Express 3‐Plates sample'
name: 'Express 3‐Plates'
content: 'This is a simple example to demonstrate Express 3‐Plates.'
newURL: 'http://aralbalkan.com'
correctURLFragment: 'moderniosdevelopment'
aralImageURL: 'http://aralbalkan.com/images/aral.jpg'
friend:
[
{name: 'Laura', skills: 'design, development, illustration, speaking'},
{name: 'Seb', skills: 'particles, games, JavaScript, C++'},
{name: 'Natalie', skills: 'HTML, CSS'}
]
map = plates.Map()
# Tag
# Note: Bug in plates: If title tag already has text content it is not replaced.
map.tag('title').use('title')
# By class
map.class('target').to('content')
# By ID
map.where('id').is('title').to('title')
# By attribute selector
map.where('data-content').is('name').to('name')
# Replace an attribute if it is a match
map.where('href').is('/').insert('newURL')
# Partial value replacement
map.where('href').has(/aralbalkan/).insert('correctURLFragment')
# Arbitrary attributes
map.where('data-content').is('photo').use('aralImageURL').as('src')
# Collections
# Note: class name must match the data name exactly
map.class('friend').use('friend')
map.class('name').use('name')
map.class('skills').use('skills')
# Conditionals
if friends
map.class('no-friends-warning').remove()
else
map.class('friends-list').remove()
exports.route = (request, response) ->
response.render 'simple', { data: data, map: map }