Plates example

This is the same template for 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. Set 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 Ind.ie.

This should be Aral’s headshot:

Friends and their skills

  • Name knows 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 Ind.ie.</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: 'ind.ie'
  aralImageURL: 'http://aralbalkan.com/images/aral.jpg'
  friend:
  [
    {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'}
  ]

  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.com/).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 }