<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="author" content="hua" />
<script src="../js/jquery-1.8.1.min.js"></script>
<script src="../js/jsrender.min.js"></script>
<style>
.table201404120200{
}
.table201404120200 td{
border: solid 1px #CCCCCC;
}
</style>
</head>
<body>
<div id="content20140412">
</div>
<!--jsrender 樣板宣告 (主樣板)-->
<script id="mainTmpl201404120200" type="text/x-jsrender">
<table width="400px" class='table201404120200'>
<thead>
<tr ><th colspan="4">{{:title}}</th></tr>
</thead>
<tbody>
<tr>
<td>品名</td>
<td>數量</td>
<td>成本</td>
<td>售價</td>
<td>價差</td> <!--呼叫 js method-->
<td>價差*2</td>
<td>index</td>
<td>color</td>
</tr>
</tr>
{{for data tmpl="#reportTmpl201404120200" /}}
</tbody>
</table>
</script>
<!--jsrender 樣板宣告 (子樣板)-->
<script id="reportTmpl201404120200" type="text/x-jsrender">
<tr>
<td>{{: nam }}</td>
<td>{{: quantity }}</td>
<td>{{: cost }}</td>
<td>{{: price}}</td>
<td>{{: ~method( price , cost)}}</td> <!--呼叫 js method-->
<td>{{: ~method( price , cost) * 2}}</td> <!--呼叫 js method-->
<td>{{: #index }}</td>
{{if #index % 2 == 0}}
<td style="background:#FF0080 ">#FF0080</td>
{{else}}
<td style="background:#FF8000 ">#FF8000</td>
{{/if}}
</tr>
</script>
<script>
(function(){
//資料,以資料驅動畫面
var report = {
title : '貨品資訊列表',
data : [
{
nam : '精工表',
quantity : 2,
cost : 10000,
price : 30000,
},
{
nam : '魯夫公仔',
quantity : 20,
cost : 100,
price : 399,
},
{
nam : 'RX-78 RG 1/144',
quantity : 10,
cost : 500,
price : 1000,
}
]
};
function difference(price, cost){
return price - cost;
}
var html = $("#mainTmpl201404120200").render(report , {method : difference});
//console.log(html);
$('#content20140412').html(html);
})();
</script>
</body>
navigate.html
<script id="navigate" type="text/x-jsrender">
<li>
<a href="{{:url}}">{{:name}}</a>
{{if childList != null && childList.length > 0}}
<ul>
{{for childList tmpl='#navigate' }}
{{/for}}
</ul>
{{/if}}
</li>
</script>
navigateData.json
[{"name":"men","url":"#","id":"001","childList":[
{"name":"衣服","url":"#","id":"100","childList":[
{"name":"夏威夷風","url":"#","id":"100","childList":null},
{"name":"日本風","url":"#","id":"200","childList":null}
]},
{"name":"褲子","url":"#","id":"200","childList":null}]},
{"name":"kinds","url":"#","id":"002","childList":[
{"name":"衣服","url":"#","id":"100","childList":null},
{"name":"褲子","url":"#","id":"200","childList":null}]},
{"name":"woman","url":"#","id":"003","childList":[
{"name":"衣服","url":"#","id":"100","childList":null},
{"name":"褲子","url":"#","id":"200","childList":null}]}]
index.html
<!DOCTYPE html>
<html>
<head id="docHead">
<title>Jsrender + superfish DEMO</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-language" content="zh-TW">
<!--include Jquery superfish plugin of css-->
<link rel="stylesheet" href="css/superfish.css"/>
</head>
<body>
<div></div>
<!--menu-->
<ul class="sf-menu">
</ul>
<!--include Jquery-->
<script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>
<!--incude templates Engine-->
<script src="lib/jsrender.min.js" type="text/javascript"></script>
<!--incude Jquery superfish menu plugin-->
<script src="lib/hoverIntent.js" type="text/javascript"></script>
<script src="lib/supersubs.js" type="text/javascript"></script>
<!--process-->
<script type="text/javascript">
(function(window, undefined) {
//test for chrome or firefox
//console.log(window);
var loadTemplates = function() {
$.get("./templates/navigate.html", function(data) {
$("#docHead").append(data);
getNavigateData();
});
};
var getNavigateData = function() {
$.get('./data/navigateData.json', function(result) {
//console.log(result);
$(".sf-menu").html($('#navigate').render(result));
},"json");
};
var init = function() {
loadTemplates();
}
init();
})(window);
</script>
</body>
</html>
參考資料：
