handlebarsjs

テンプレートエンジン

http://handlebarsjs.com/

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
</head>

<div id="input" class="template">
  <h2>{{title}}</h2>
  <p class="message">{{message}}</p>
  <ul>
  {{#each comments}}
    <li>
      <span>name: {{./name}}</span>
    {{#if comment}}
      <span>{{comment}}</span>
    {{else}}
      <span>...</span>
    {{/if}}
    </li>
  {{/each}}
  </ul>
  <ol>
  {{#each ary}}
     <li>{{@index}}: {{.}}</li>
  {{/each}}
  {{#each ary}}
     <li>{{filterPower .}}</li>
  {{/each}}
  </ol>
</div>


<div id="output">
  .....
</div>


<script>
var context = {
  title: 'Title',
  message: 'Message',
  comments: [
    {name: 'John', comment : 'Hi!'},
    {name: 'Bob'},
    {name: 'Mike'},
  ],
  ary: [
    'Hop',
    'Step',
    'Jump',
  ],
};


Handlebars.registerHelper('filterPower', function(person) {
   console.log(this);
  return this + "!";
});

var template = Handlebars.compile($('#input').html());
var output = template(context);

$('#output').html(output);
</script>