JSライブラリ > Mustache.js

Mustache.js

Mustache.js とは

JavaScriptのテンプレートエンジン

利用準備

https://github.com/janl/mustache.js/ からダウンロードした js をヘッダで読み込む

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

単純な値の展開

var view = {
  title: "Joe",
  // 関数を指定する事も可能
  calc: function () {
    return 2 + 4;
  }
};

var output = Mustache.render("{{title}} spends {{calc}}", view);

リストの展開

<!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 : "タイトル1", price : 1000 }
            ,{title : "タイトル2", price : 2000 }
            ,{title : "タイトル3", price : 3000 }
            ,{title : "タイトル4", price : 4000 }
            ,{title : "タイトル5", price : 5000 }
        ]
       ,priceAndTax : function(){
            return this.price * 1.08
        }
    });
    $("#result").html(html);
});
</script>
</head>
<body>

<div id="result">
<ul>{{#book}}<li>{{title}} : {{price}}円 税込:{{priceAndTax}}</li>{{/book}}</ul>
</div>

</body>
</html>

条件分岐

HTML

一覧<br />
<div id="result2">
<ul>{{#person}}<li>{{name}} : 年齢:{{price}} 性別:{{sexJp}}</li>{{/person}}</ul>
</div>

<hr />

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

JavaScript

$(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);
});

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-08-12 (水) 19:02:41 (1222d)