jQuery plugins-2: icanhaz

The second part of useful jQuery plugins is icanhaz.

icanhaz: Icanhaz simple and powerful client-side templating.
Example: template part

<script type="text/html" id="sampleLine">
    <tr>
 <td>{{shape}}</td>
 <td>{{color}}</td>
    </tr>
</script>

Example: main part

<input type="button" value="Populate" />
<table id="sampleTable">
    <thead>
        <tr>
     <th>Shape</th>
     <th>Color</th>
 </tr>
    </thead>
    <tbody id="itemContainer">
    </tbody>
</table>

jQuery(document).ready(function() {
    var dynamicContentObject = { };
    var result;
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "samplePopulate.php",
        async:false,
        success: function( data ) {
            result= data;
        } 
    });
 
    dynamicContentObject['shape'] = result.shape;
    dynamicContentObject['color'] = result.color;
  
    var line = ich.sampleLine(dynamicContentObject); 
        $("tbody#itemContainer").append(line); 
});

It would be before clicking Populate button:

After clicking Populate button, it would look like:

icanhaz website is: icanhaz