laytpl一個輕量級的JavaScript模塊引擎,對於傳入大量的json數據來說,使用起來很方便。
用法百度即可,講解的很清晰。
在做項目的時候,想通過ajax發送參數然後接受json文件,再用laytpl,可以減少了很多dom節點操作。最開始的代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="view"></div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script src="laytpl.js"></script>
<script id="demo" type="text/html">
{{# for(var i = 0, len = d.length; i < len; i++){ }}
<h1>省份:{{ d[i].name }}</h1>
<ul>
{{# for(var j = 0, len = d[i].sons.length; j < len; j++){ }}
<li>
<span>城市:{{ d[i].sons[j].name }}</span>
</li>
{{# } }}
</ul>
{{# } }}
</script>
<script>
var data ;
$.ajax({
type:"get",
url:"test.json",
datatype:"json",
success:function(x){
data = x;
}
});
var gettpl = document.getElementById('demo').innerHTML;
laytpl(gettpl).render(data, function(html){
document.getElementById('view').innerHTML = html;
});
</script>
</body>
</html>
然後瀏覽器裏面什麼也沒有 而且報了錯:laytpl error:no data!
說明了data裏面就是沒有,但是我們chrome的控制檯下還是能console.log出data
經過小夥伴的提醒,意識到雖然在success之後的函數中將參數x賦給了data,但是由於ajax是異步執行,下面的js語句也會同時進行,所以會報錯。
解決方案1:
在ajax中加入async:false,語句,將異步請求改爲同步請求。
解決方案2:
仍然是異步執行,但是將後面的代碼也都放到success中
$.ajax({
type:"get",
url:"test.json",
datatype:"json",
success:function(data){
var gettpl = document.getElementById('demo').innerHTML;
laytpl(gettpl).render(data, function(html){
document.getElementById('view').innerHTML = html;
});
}
});
還是要多弄清原理!