Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

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

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

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
9
Help us understand the problem. What are the problem?