Plates example

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.

A placeholder title

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:

Friends and their skills

No friends found.

HTML

<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 + Map

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()

Express 3 router (node.js)

exports.route = (request, response) ->
  response.render 'simple', { data: data, map: map }