mustache.js – table, looping, conditional if-else


<!doctype html>
<html lang="en">
    <title>Mustache.js Looping - if else conditional - table </title>
    <script type="text/javascript" src="jquery.min.js" ></script>
    <script type="text/javascript" src="mustache.js" ></script>
     var data ={
      "headers":["First Name", "Last Name", "year"],
      "employe": [
         "firstName": "John",
         "lastName": "Doe",
         "year": "1985"
         "firstName": "Anna",
         "lastName": "Smith"
         "firstName": "Peter",
         "lastName": "Jones",
         "year": "1995"
   $("#templates").load("template.html #condloop",function(){
     var html = Mustache.render($('#condloop').html(), data);            
      <style> table { border-collapse: collapse; } table, th, td { border: 1px solid black; } </style>
    <div id="div1"></div>
<div id="templates" style="display:none;">


<div id="conditional">
    {{! for table, you must put code to script tag}}
    <script id='condloop'  type="text/html">
<!-- looping data headers-->
        {{#headers}} <th>{{.}}</th> {{/headers}}
<!-- end looping data headers-->
<!-- looping employe-->
<!-- condition employe.year -->
{{#year}} <!-- condition if -->
{{^year}} <!-- condition else -->
   Not Available
<!-- condition employe.year -->

<!-- end looping employe-->

Published by


just to remember what i had known :)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s