Help us understand the problem. What is going on with this article?

Mustache.jsからfunctionを呼び出す

More than 5 years have passed since last update.

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}}

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

NewGyu
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away