Mustache.js の Functions

JavaScript

社内で Mustache.js にヘルパーなくて使いづらいって話がありました。

んで、先ほどプラグインとかないのかなと見ていましたら、 github の README.md に Functions という章がありました。

これは使えるんじゃないかと、試しました。

ディレクトリ構造

$ tree
.
├── index.html   # サンプルHTML
├── mustache.js  # Mustache.js
└── zepto.min.js # Zepto.js

HTMLファイル

bold って関数を作ってそれを使う。　

実運用時は、data をヘルパー関数群を登録したオブジェクトから生成する ( Object.create(SomeObject) ) 感じかな。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>A Mustache.js sample.</title>
  </head>
  <body>
    <h1>There is mustache!</h1>                                                                                               
    <div id="sandbox"></div>
    <script id="sampleTpl" type="text/template">
      <p>{{#bold}}{{msg}}{{/bold}}</p>
    </script>
    <script src="zepto.min.js" type="text/javascript"></script>
    <script src="mustache.js" type="text/javascript"></script>
    <script type="text/javascript">
      (function() {
        // テンプレートを読み込む
        var template = $('#sampleTpl').html();
        // 表示用変数を初期化する
        var data = {
          msg: 'hoge fuga piyo.',
          bold: function() {
            // 入力値と、描画用関数が渡ってくる
            return function(text, render) {
              return ['<b>', render(text), '</b>'].join('');
            };
          }
        };
        // 書き出し
        var html = Mustache.to_html(template, data);
        $('#sandbox').html(html);
      })();
    </script>
  </body>
</html>

参考

HTML の雛形とかいつも検索しちゃう。