1. 程式人生 > 實用技巧 >JS_0037:template 模板引擎使用

JS_0037:template 模板引擎使用

引入引擎檔案template.js

1,定義引擎模組

<script type="text/html" class="card-tpl">
    <!-- 生成案例列表迴圈 -->
    <%for(var i = 0;i < cards.length; i++){%>
        <div class="card-wrap" name="<%:=cards[i].proAddr%>">
            <img src="<%:=cards[i].img%>" alt="" class="left">
            <span class="card-title">
                <%:=cards[i].title%>
            </span>
            <span class="card-slogen"><%:=cards[i].slogen%></span>
        </div>
    <%}%>
</script>

2,讀取json資料並賦值生成html標籤

    $.get("../data/url.json", function(t) {
        var a = document.getElementsByClassName("card-tpl")[0].innerHTML,
            n = template(a, {
                cards: t.data
            });
        $(".cards-part").append($(n)), 
        bindClickEvt(), 
        loaded()
    })

json資料格式