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);

    }

    });