JSFiddle - React, Tailwind, and code Playground

by naokiota

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
  {{tmpl "titleTemplate"}}
  <tr class="detail">
      <td>Director: ${Director}
      </td>
      <td>
        <a data-role="button">push me</a>
      </td>
  </tr>
</script>

<table><tbody id="movieList"></tbody></table>
<a data-role="button" href="#" >push me1</a>

CSS

table { border-collapse:collapse; border:2px solid blue; margin:8px; background-color:#f8f8f8; }
table tr { border:1px solid blue; } table td { padding:2px; }
.title { border-bottom:none; } .detail { border-top:none; }

JavaScript

// template
var movies = [
    {
    Name: "The Red Violin",
    Director: "François Girard"},
{
    Name: "Eyes Wide Shut",
    Director: "Stanley Kubrick"},
{
    Name: "The Inheritance",
    Director: "Mauro Bolognini"}
];

/* Convert the markup string into a named template,
   referenced by the {{tmpl}} tag */
$.template("titleTemplate", "<tr class='title'><td>title:${Name}</td></tr>");

/* Render the movies data, using the named template as a nested template */
$("#movieTemplate").tmpl(movies).appendTo("#movieList");