1.首先先要下載artTemplate.js,這個可以在官網下載也可以在GitHob進行下載。 2.現在是編寫一個存放html標簽的編寫模板,使用<script type="text/html" id="site_template"></script>裝載,裡面的id是你到時候將確認將數據傳給誰的綁 ...
1.首先先要下載artTemplate.js,這個可以在官網下載也可以在GitHob進行下載。
2.現在是編寫一個存放html標簽的編寫模板,使用<script type="text/html" id="site_template"></script>裝載,裡面的id是你到時候將確認將數據傳給誰的綁定,詳情請看下麵代碼
<script type="text/html" id="site_template"> {{each list as value i}} <div class="content"> <div class="message flex"> <span>{{value.conactName}}</span> <span>{{value.conactphone}}</span> </div> <p>{{value.address}}{{value.addressInfo}}</p> </div> {{/each}} </script> 註:這個時候要說了編寫模板的話有簡潔語法和原聲語法,我這裡用的就是簡潔語法,然後我自己也比較推薦使用,他相對原聲語法的話比較簡單也利於實用 原聲語法就這總: <%if (potics){%> <%include('potics_content')%> <%for (var i=0;i<list.length;i++) {%> <div><%=i%>. <%=list[i].content%></div> <%}%> <%}%> 相當於就是把你所要用的原聲js拿<%%>包起來而已3.然後就是渲染模板,下放代碼只是模仿的數據,如果小伙伴的數據是從後臺獲取上來就把你從ajax獲取的data數據換上就好啦
var data = { title: '你好', list: ['士力架', '糖葫蘆', '草', '土', '牛肉', '雞', '鴨'] }; var html = template('site_template', data);//這個就是用來連接編寫模板和渲染模板的 document.getElementById('wrap').innerHTML = html;//而這個是把連接好的html和數據傳到你想要把html放在的哪個標簽裡面 然後artTemplate的大概使用就介紹到這裡了