使用juicer模板創建jQuery-weui九宮格 示例

第一步將需要的js以及css引入：

<script src="/www/all_method/jquery_weui/lib/jquery-2.1.4.js"></script>
<!--引入juicer-->
<script type="text/javascript"
	src="/www/all_method/jquery_weui/lib/juicerTemplate.js"></script>
<!-- 引入jquery-weui的js -->
<script src="/www/all_method/jquery_weui/js/jquery-weui.js"></script>
<link rel="stylesheet"
	href="/www/all_method/jquery_weui/css/jquery-weui.css">

 簡單解釋：第一個js爲jQuery的js

                   第二個js爲juicer所依賴的js

                   第三個js爲jQuery-weui所依賴的js

                   第四個爲jQuery-weui所依賴的css

第二步建立jQuery-weui的模板

<script type="text/template" id="tpl">

    <div class="weui-grids"> 
    {@each gridInfo as grid,index}
    <a href="${grid.herf}" class="weui-grid js_grid">
		    <img src="${grid.imagePath}" alt="">
    </div>
    <p class="weui-grid__label">${grid.gridName}</p>
    </a>
    {@/each}
    </div>
</script>

簡單解釋：

 九宮格的樣式依舊使用jQuery-weui的樣式，九宮格的每一項鍊接地址以及顯示圖片跟名稱根據數據動態獲取

{@each gridInfo as grid,index}：遍歷數據中的gridInfo數組

href="${grid.herf}" ：分別取出數組中的herf字段賦值到a標籤的href的鏈接地址上，作爲九宮格的標籤的鏈接地址

src="${grid.imagePath}" ：分別取出數組中的imagePath字段，並賦值個img標籤的src，作爲九宮格顯示圖片

${grid.gridName}：分別取出數組中的gridName字段，並賦值個p標籤的值，作爲九宮格的顯示名稱

第三步建立一個div來接收渲染結果

<!--建立一個div來接收渲染結果-->
	<div id="result"></div>

第四步根據數據得到渲染結果，放到DOM元素中，在頁面上顯示

<script type="text/javascript">
    // 數據
    var gridData = {
	    gridInfo : [ {
	        herf : '../button.html',
		    imagePath : '../images/icon_nav_button.png',
	       	gridName : 'one',
	    	show : true
	    }, {
	    	herf : '../button.html',
	    	imagePath : '../images/icon_nav_button.png',
		    gridName : 'two',
		    show : false
	    }, {
		    herf : '../button.html',
		    imagePath : '../images/icon_nav_button.png',
	       	gridName : 'three',
	    	show : true
	    }, {
	    	herf : '../button.html',
		    imagePath : '../images/icon_nav_button.png',
		    gridName : 'four',
		    show : true
	    }, {
		    herf : '../button.html',
		    imagePath : '../images/icon_nav_button.png',
		    gridName : 'five',
		    show : true
	    }, {
		    herf : '../button.html',
		    imagePath : '../images/icon_nav_button.png',
	        gridName : 'six',
		    show : true
	    } ]
    };
    var tpl=document.getElementById().innerHtml;
    var html = juicer(tpl, gridData); // 得到渲染結果，需要放到DOM元素中才能在頁面中顯示
    console.log(html)// 編譯模板並立即渲染出結果，如沒有下一句頁面看不到結果
    $("#result").html(html);

</script>

根據註釋不做過多解釋！

點擊下載HTML源碼以及juicerTemplate.js