Mustache.jsからfunctionを呼び出す

https://github.com/janl/mustache.js のお話です。

条件式がかけない

Mustacheはテンプレートエンジンの一つでヒジョーにシンプルです。
しかし、シンプル故に条件分岐でできることが限られています。
{{#...}} {{/...}}この構文でIF分岐的なことはできます。 （こちらを参照）

JS

var attr = {
   data: {
     hoge: "aaa"
     ,fuga: "bbb"
   }
}

var output = Mustache.render($("#template").html() ,attr);

テンプレート

<script type="text/template" id="template">
{{#data.hoge}}hogeがaaa{{/data.hoge}}
</script>

が、これってdata.hogeにnull,undefined,false,0以外の値が入っていれば真として評価されるだけで、{{#data.hoge=="aaa"}}とか{{#data.hoge.indexOf("a")>-1}}みたいないわゆる条件式が書けないんですね。

functionを追加する

こんな時はどうするかというと、objectにfunctionをもたせます。

JS

var attr = {
   data: {
     hoge: "aaa"
     ,fuga: "bbb"
     ,hogeIsAAA: function() {
         return this.hoge == "aaa";
      }
   }
}

こうすれば、

テンプレート

{{#data.hogeIsAAA}}hogeがaaa{{/data.hogeIsAAA}}

こうかけます。

じゃあ、functionの戻り値をテンプレートにバインドできるのか？

できます。

テンプレート

目の付け所が{{data.hogeIsAAA}}

結果

目の付け所がtrue

functionに引数は渡せるの？

JS

var attr = {
   data: {
     hoge: "aaa"
     ,fuga: "bbb"
     ,hogeIs: function(expect) {
         return this.hoge == expect;
      }
   }
}

テンプレート

目の付け所が{{data.hogeIs("aaa")}}

できません。エラーになっちゃいます。

functionの返り値がobject型だったら？

JS

var attr = {
   data: {
     hoge: "aaa"
     ,fuga: "bbb"
     ,getObject: function() {
       return {
         attr1: "value1"
         ,attr2: "value2"
       };
     }
   }
}

テンプレート

目の付け所が{{data.getObject.attr1}}

ダメです。。。
これができるもんだと思って結構ハマッてしまいました。