Use of JQuery Templates

This is a basic demo of using JQuery Template

by FrictionlessPulley

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script type="text/x-jquery-tmpl" id="preview">
    <div>${name}</div>  
</script>
<script type="text/x-jquery-tmpl" id="address">
(${type}) : ${number}<br/>
</script>
<script type="text/x-jquery-tmpl" id="loop">
    {{each(i,address) data}}
    <div>Street: ${address.street}</div>
    <div>City: ${address.city}</div>
     {{if address.city =='New York'}} <b>LIVE FROM NEW YORK <br/></b> {{/if}}
    <fieldset>
        <legend>Contacts</legend>
        {{tmpl(address.contact) "#address"}}
    </fieldset>
    {{/each}}
</script>
<div id="previewContainer"></div>
<div id="loopContainer"></div>

JavaScript

$(function() {
    var dataArray = [{name: "ameya"},{name: "anuja"}];
    var loopArray = {data:[
        {address:{
            street:'Cross Ave', 
            city:'Los Angeles',
            contact: [ {type:'home',number:'abcd'} ,{type:'mobile',number:'xyz'}]
        }
        },
        {
            address:{
                street:'Times Square Ave', 
                city:'New York',
                contact: [ {type:'home',number:'123'} ,{type:'mobile',number:'0000'}]
            }
        }]};
    

    $('#preview').tmpl(dataArray).appendTo('#previewContainer');
    $('#loop').tmpl(loopArray).appendTo('#loopContainer');
    
    
    
});