![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
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 : "タイトル１", 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>{{#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);
});
|
