Mustache.js の変更点 - 闘うITエンジニアの覚え書き

追加された行はこの色です。
削除された行はこの色です。
Mustache.js へ行く。
[[JSライブラリ]] > Mustache.js
* Mustache.js [#qecb99a0]
#setlinebreak(on)

#contents

** Mustache.js とは [#z1ee7b5a]
#html(<div style="padding-left:20px;">)
JavaScriptのテンプレートエンジン
#html(</div>)

** 利用準備 [#v759aa49]
#html(<div style="padding-left:20px;">)
https://github.com/janl/mustache.js/ からダウンロードした js をヘッダで読み込む
#myhtmlcode(){{
<head>
<meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="mustache.min.js"></script>
</head>
　・
　・
}}
#html(</div>)

** 単純な値の展開 [#v43c0d77]
#html(<div style="padding-left:20px;">)
#mycode(){{
var view = {
  title: "Joe",
  // 関数を指定する事も可能
  calc: function () {
    return 2 + 4;
  }
};

var output = Mustache.render("&#123;&#123;title&#125;&#125; spends &#123;&#123;calc&#125;&#125;", view);
}}
#html(</div>)

** リストの展開 [#e2a8bad2]
#html(<div style="padding-left:20px;">)
#myhtmlcode(){{
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="jquery.min.js"></script>
<script src="mustache.min.js"></script>
<script type="text/javascript">
$(function(){
    var template = $("#result").html();
    var html = Mustache. render( template, {
         book : [
             {title : "タイトル１", price : 1000 }
            ,{title : "タイトル２", price : 2000 }
            ,{title : "タイトル３", price : 3000 }
            ,{title : "タイトル４", price : 4000 }
            ,{title : "タイトル５", price : 5000 }
        ]
       ,priceAndTax : function(){
            return this.price * 1.08
        }
    });
    $("#result").html(html);
});
</script>
</head>
<body>

<div id="result">
<ul>&#123;&#123;#book&#125;&#125;<li>&#123;&#123;title&#125;&#125; : &#123;&#123;price&#125;&#125;円　税込:&#123;&#123;priceAndTax&#125;&#125;</li>&#123;&#123;/book&#125;&#125;</ul>
</div>

</body>
</html>
}}
#html(</div>)

** 条件分岐 [#j675a719]
#html(<div style="padding-left:20px;">)
HTML
#myhtmlcode(){{
一覧<br />
<div id="result2">
<ul>&#123;&#123;#person&#125;&#125;<li>&#123;&#123;name&#125;&#125; : 年齢:&#123;&#123;price&#125;&#125; 性別:&#123;&#123;sexJp&#125;&#125;</li>&#123;&#123;/person&#125;&#125;</ul>
</div>

<hr />

男性のみ<br />
<div id="result3">
<ul>&#123;&#123;#person&#125;&#125;&#123;&#123;#isMan&#125;&#125;<li>&#123;&#123;name&#125;&#125; : 年齢:&#123;&#123;price&#125;&#125; 性別:&#123;&#123;sexJp&#125;&#125;</li>&#123;&#123;/isMan&#125;&#125;&#123;&#123;/person&#125;&#125;</ul>
</div>
}}

JavaScript
#mycode(){{
$(function(){
    var personData = {
        person : [
            { name:"taro"  , age: 20, sex: "man" }
           ,{ name:"hanako", age: 25, sex: "woman"}
           ,{ name:"ichiro", age: 30, sex: "man"}
           ,{ name:"jiro"  , age: 35, sex: "man"}
        ],
        sexJp : function(){
            if (this.sex == "man"){
                return "男性";
            } else if (this.sex == "woman") {
                return "女性";
            } else {
                return "不明";
            }
        },
        isMan : function(){
            return (this.sex == "man");
        }
    };

    var template2 = $("#result2").html();
    var html2 = Mustache.render( template2, personData);
    $("#result2").html(html2);

    var template3 = $("#result3").html();
    var html3 = Mustache.render( template3, personData);
    $("#result3").html(html3);
});
}}
#html(</div>)