Hogan.js

twitter製テンプレートエンジン

http://twitter.github.io/hogan.js/

IF文などの構文には対応してないため、JSON側を加工することになる

実行速度は速い

ファイスサイズは10KB程度

mustache記法

https://github.com/janl/mustache.js

//cdnjs.cloudflare.com/ajax/libs/hogan.js/3.0.0/hogan.min.js

<div id="input" class="template">
  <h2>{{title}}</h2>
  <p class="message">{{message}}</p>
  <ul>
  {{#comments}}
    <li>
      <span>name: {{name}} [{{filterName}}]</span>
    {{#comment}}
      <span>{{comment}}</span>
    {{/comment}}
    {{^comment}}
      <span>...</span>
    {{/comment}}
    </li>
  {{/comments}}
  </ul>
  <ol>
  {{#ary}}
     <li>{{index}}: {{.}} : {{pops}}</li>
  {{/ary}}
  </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',
  ],
};

//配列にインデックスをつける
context.ary.index = (function(){
  var i = 0;
  return function(){
    return i++;
  }
})();
context.ary.pops = (function(){
  return function(){
    return this + '!!';
  }
})();

context.comments.filterName = (function(){
  return function(){
    if(this.name.match(/^J/)){
      return 'Mr.J';
    }
    return '--' + this.name + '--';
  }
})();


console.log(context);
console.log(context.comments);

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

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