<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>
參考資料：