1 Template.html

<article about="/spin/latest/">
  <partial template="article-header">
    <h1>What's been spinning on the radio?</h1>
  </partial>
  <partial template="signup-link" />
  <p>
    <span property="stats.total"></span>
    <if condition="stats.total == 1">Recent spin.</if>
    <else>Recent spins.</else>
    Click for full playlist.
  </p>
  <ul>
    <li about="/spin/latest/$id">
        <a property="song.title"></a>
        by
        <a property="song.artist"></a>
        from
        <a property="song.album.title"></a>
        (<span property="song.album.publisher.name"></span>)
        spun at <time property="createdAt"></time>
        by <a property="spinner.name"></a>
        on <a property="show.name"></a>
        , <a property="station.name"></a>
    </li>
    <li empty>
        <p>No items in the list</p>
    </li>
  </ul>
</article>

<template id="signup-link">
  <a href="/signup">Join now!</a>
</template>

<template id="article-header">
  <header class="hero-unit">
    <a href="#" data-trigger="close">x</a>
    <content />
  </header>
</template>

2 Giveninput.php

<?php
$collection = array(
  array(
    "url" => "/spin/latest/1",
    "body" => array(
      "id" => 1,
      "createdAt" => date("Y-m-d H:i:s"),
    ),
    "links" => array(
      "song" => "/song/1",
      "spinner" => "/user/1",
      "show" => "/show/1",
      "station" => "/station/1",
    )
  ),
  array(
    "url" => "/spin/latest/2",
    "body" => array(
      "id" => 2,
      "createdAt" => date("Y-m-d H:i:s"),
    ),
    "links" => array(
      "song" => "/song/2",
      "spinner" => "/user/2",
      "show" => "/show/2",
      "station" => "/station/2",
    )
  ),
  array(
    "url" => "/spin/latest/3",
    "body" => array(
      "id" => 3,
      "createdAt" => date("Y-m-d H:i:s"),
    ),
    "links" => array(
      "song" => "/song/3",
      "spinner" => "/user/3",
      "show" => "/show/3",
      "station" => "/station/3",
    )
  ),
);

$helpers = array(
  "stats" => array(
    "total" => function() use ($data) {
      return count($data);
    }
  )
);

3 output.html

<article about="/spin/latest/">
   <header class="hero-unit">
    <a href="#" data-trigger="close">x</a>
    <h1>What's been spinning on the radio?</h1>
  </header>
  <a href="/signup">Join now!</a>
  <p>
    <span property="stats.total">3</span>
    Recent spins.
    <script type="text/template">
      <if condition="stats.total == 1">Recent spin.</if>
      <else>Recent spins.</else>
    </script>
    Click for full playlist.
  </p>
  <ul>
    <li about="/spin/latest/1">
        <a property="song.title" href="/song/1">Test Song 1</a>
        by
        <a property="song.artist" href="/artist/1">Test Artist 1</a>
        from
        <a property="song.album.title" href="/album/1">Test Album 1</a>
        (<span property="song.album.publisher.name" href="/publisher/1">Test Publisher 1</span>)
        spun at <time property="createdAt" datetime="20012-11-29 23:57:57">Just Now</time>
        by <a property="spinner.name" href="/user/1">Test User 1</a>
        on <a property="show.name" href="/show/1">Test Show 1</a>
        , <a property="station.name" href="/station/1">Test Station 1</a>
    </li>
    <li about="/spin/latest/2">
        <a property="song.title" href="/song/2">Test Song 2</a>
        by
        <a property="song.artist" href="/artist/2">Test Artist 2</a>
        from
        <a property="song.album.title" href="/album/2">Test Album 2</a>
        (<span property="song.album.publisher.name" href="/publisher/2">Test Publisher 2</span>)
        spun at <time property="createdAt" datetime="20012-11-29 23:57:57">Just Now</time>
        by <a property="spinner.name" href="/user/2">Test User 2</a>
        on <a property="show.name" href="/show/2">Test Show 2</a>
        , <a property="station.name" href="/station/2">Test Station 2</a>
    </li>

    <li about="/spin/latest/3">
        <a property="song.title" href="/song/3">Test Song 3</a>
        by
        <a property="song.artist" href="/artist/3">Test Artist 3</a>
        from
        <a property="song.album.title" href="/album/3">Test Album 3</a>
        (<span property="song.album.publisher.name" href="/publisher/3">Test Publisher 3</span>)
        spun at <time property="createdAt" datetime="20012-11-29 23:57:57">Just Now</time>
        by <a property="spinner.name" href="/user/3">Test User 3</a>
        on <a property="show.name" href="/show/3">Test Show 3</a>
        , <a property="station.name" href="/station/3">Test Station 3</a>
    </li>

    <script type="text/template">
      <li about="/spin/latest/$id">
          <a property="song.title"></a>
          by
          <a property="song.artist"></a>
          from
          <a property="song.album.title"></a>
          (<span property="song.album.publisher.name"></span>)
          spun at <time property="createdAt"></time>
          by <a property="spinner.name"></a>
          on <a property="show.name"></a>
          , <a property="station.name"></a>
      </li>
      <li empty>
          <p>No items in the list</p>
      </li>
    </script>
  </ul>
</article>

<script type="text/template" id="signup-link">
  <a href="/signup">Join now!</a>
</script>

<script type = "text/template" id="article-header">
  <header class="hero-unit">
    <a href="#" data-trigger="close">x</a>
    <content />
  </header>
</script>