artTemplate-优秀的前端模板引擎

artTemplate-优秀的前端模板引擎

1.html中引入artTemplate的js文件:

 <script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
 <script type="text/javascript" src="./artTemplate/template-native.js"></script>
 <script type="text/javascript" src="./js/index.js"></script>

2.html中编写模板script:

<script type="text/template" id="pointTemplate">
    <% for(var i=0;i< list.length;i++){ %>
    <li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=i==0?'active':''%>"></li>
    <% } %>

</script>

<script type="text/template" id="imageTemplate">
    <% for(var i = 0 ; i < list.length ; i ++){ %>
    <div class="item <%=i==0?'active':''%>">
        <% if(isMobile){ %>
        <a href="#" class="m_imgBox"><img src="<%=list[i].mUrl%>" alt=""></a>
        <% }else{ %>
        <a href="#" class="pc_imgBox" style="background-image: url(<%=list[i].pcUrl%>)"></a>
        <% } %>
    </div>
    <% } %>

</script>

3.js代码中ajax请求获得数据:

 $.ajax({
        type: 'get',
        url: 'json/data.json',
        dataType: 'json',
        data: '',
        success: function (data) {
            var isMobile = $(window).width() < 768 ? true : false;
            // 开始使用模板
            var pointHtml = template('pointTemplate', {list: data});
            var imageHtml = template('imageTemplate',{list:data,isMobile:isMobile});
            // 把字符串渲染到页面中
            $(".carousel-indicators").html(pointHtml);
            $(".carousel-inner").html(imageHtml);
    }
    });