jQuery Template Each

by HYEONGJINKIM

HTML

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

<body>
    <h3>Person Details</h3>
    <div class='personal-detais'>
    </div>
</body>

<script type='text/x-jquery-tmpl' id='person-template'>
  <div class='person'>
    <strong>Name:</strong> ${ Name } <br />
    <strong>Skills: </strong><br />
    {{each Skills}}
      ${Skill} <br /> 
    {{/each}}
  </div>
</script>

JavaScript

var steve = {
  'Name':'Steve',
  'Skills':[
    {'Skill':'Rails'},
    {'Skill':'HTML'},
    {'Skill':'jQuery'}
  ]
};

$(document).ready(function(){
    $('#person-template').tmpl(steve).appendTo('.personal-detais');
});