模板引擎的几种写法

方法一：

<script type="text/template" id="navTemp">
    <% for(var i=0;i<items.length;i++){ %>
        <li>
            <a href="#">
                <img src="<%=items[i].src%>" alt="">
                <p><%=items[i].text%></p>
            </a>
        </li>
    <% } %>
</script>

方法二：

<script type="text/template" id="navTemp">
    {{each data as value index}}
        <li>
            <a href="#">
                <img src="{{value.src}}" alt="">
                <p>{{value.text}}</p>
            </a>
        </li> 
    {{/each}}       
</script>

以上两种任选一种，下面为必选项

<script src="./js/jquery.min.js"></script>
<script src="./js/template-native.js"></script>
<script>
    $.ajax({
        type:'get',
        url:'http://day8.com/getnav.php',
        //开启跨域请求
        dataType:"jsonp",
        success:function(result){
            console.log(result);
            var html=template("navTemp",{"items":result});
            document.querySelector("ul").innerHTML=html;
        }
    })
</script>