This is the template as rendered by Tally, along with the Tally 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.
This is the template in Tally. 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.
Hello from name of the templating engine!
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.
Some sample content.
That could help when styling the page.
No friends found.
<h1 data-tally-text='title'>A placeholder title</h1>
<p>Hello from <span data-tally-text='name'>name of the templating engine</span>!<p>
<!-- Text substitution -->
<p data-tally-text='content'>This paragraph is a placeholder.</p>
<!-- Attribute substitution -->
<p><a data-tally-attribute='href newURL' href='/'>This should link to Aral’s homepage.</a></p>
<!-- Custom Formatter -->
<p><a data-tally-attribute='href correctURLFragment fullURL' href='http://aralbalkan.com'>This should link to the Modern iOS Development workshop.</a></p>
<p>This should be Aral’s headshot:</p>
<!-- Placeholder image -->
<img data-tally-attribute='src aralImageURL' src='http://placehold.it/600x600'>
<h2>Friends and their skills</h2>
<!-- Conditional -->
<ul data-tally-if='friends'>
<!-- Repeater -->
<li data-tally-repeat='friend friends'>
<p><span data-tally-text='friend.name'>Name</span> knows <span data-tally-text='friend.skills'>skills</span>.</p>
</li>
<!-- Dummy data -->
<li data-tally-dummy>
<p>Some sample content.</p>
</li>
<li data-tally-dummy>
<p>That could help when styling the page.</p>
</li>
</ul>
<!-- Conditional -->
<p data-tally-if='not:friends'>No friends found.</p>
data =
title: 'Tally sample'
name: 'Tally'
content: 'This is a simple example to demonstrate Tally, a templating engine for Express (node.js) and client‐side JavaScript.'
newURL: 'http://aralbalkan.com'
correctURLFragment: 'moderniosdevelopment'
aralImageURL: 'http://aralbalkan.com/images/aral.jpg'
friends:
[
{name: 'Laura', skills: 'design, development, illustration, speaking'},
{name: 'Seb', skills: 'particles, games, JavaScript, C++'},
{name: 'Natalie', skills: 'HTML, CSS'}
]
exports.route = (request, response) ->
# Custom formatter
data.__tally = {
formatters:
fullURL: (value) ->
return 'http://' + value + '.com'
}
response.render 'simple', data