index.html



<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  
  <!-- Toffle -->
  <script src="toffle.js"></script>

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <input type="button" value="Let's Toffle!" onclick="generateMarkup()">
 
    <div id="container"></div>
	
	<div id="cakeContainer"></div>
    
    <br><div id="TimerBox"></div>
    
    <script id="myInfoTemplate" type="text/toffle-template">
    
        <h1>First Name</h1>
        <p> <^ input.fName ^> is my name </p><br>
        
        <h2>Second Name</h2>
        <p><^ input.sName ^></p><br>
        
        <h4>Pets:</h4>
        <^ each pet in input.pets ^> 
            <^ plug pettemplate pet false "Waffles and IceCream"^>
        <^/^>
        
        <h4>Pets supercute:</h4>
        <^ match pet in ??catIsSuperCute input.pets ^> 
            <^ plug pettemplate pet true input.pets[[0]].name^>
        <^/^>
        
        <h3>Age</h3>
        <p><^ input.age ^></p><br>
        
        <^ if input.isLoved ^> There is an age! <^/^>
        
        <^ ??isBetween input.age 20 true 40 ^> Between 20 and 40!!! <^/^>
    </script>
    
    <script id="pettemplate" type="text/toffle-template" data-params="petInfo|valtest|faveFood">
        <hr>
        <p>Name: <^ petInfo.name ^> just loves <^ faveFood ^></p>
        <p>Cuteness Level: <^ petInfo.cutenessLevel ^></p>
        <^ if valtest ^> HELLO! <^/^>
        <hr>
    </script>

    <script>

        // Test JSON
        var json = {
            fName:"Nikolas",
            sName:"Howard",
            favouritefood:"Egg Custard Tarts",
			isLoved: null,
            age:25,
            pets:[
                {
                    name:"Wilfred",
                    cutenessLevel: 6
                },
                {
                    name:"Scrabbles",
                    cutenessLevel: 4
                },
                {
                    name:"Neighbour Cat",
                    cutenessLevel: 2
                },
                {
                    name:"Kiddles",
                    cutenessLevel: 10
                },
                {
                    name:"Fluffums",
                    cutenessLevel: 11
                }
            ]
        };

        var myTemp;

        function generateMarkup()
        {
            // lets see how long it takes do generate our markup using our templates.
            var d = new Date();
            var startTime = d.getTime();

            if(!myTemp)
            {
            	myTemp = toffle.template({
	                template: document.getElementById('myInfoTemplate'),
	                helpers: {
	                    isYoungerThan: function(age, targetAge){
	                        return age < targetAge;
	                    },
	                    catIsSuperCute: function(cat){
	                        return cat.cutenessLevel > 4;
	                    },
	                    isBetween: function(age, lower, testbool, upper){
	                        return (age >= lower) && (age <= upper) && testbool
	                    }
	                }
	            });
            }
            
            var output = myTemp.go({ input: json }); 
			
            document.getElementById('container').innerHTML = output; 
            
            // display the elapsed time
            document.getElementById("TimerBox").innerHTML = "Time Taken: " + ((new Date().getTime() - startTime) / 1000) + "ms" ;
        }
        
    </script>
    
</body>
</html>