需求:
實(shí)現(xiàn)下面這段html結(jié)構(gòu)反症,拿到數(shù)據(jù)后動態(tài)渲染html,這里數(shù)據(jù)比較多,因?yàn)閿?shù)據(jù)多畔派,結(jié)構(gòu)復(fù)雜铅碍,才能體現(xiàn)出模板的威力。目標(biāo)結(jié)構(gòu)如下:
<div class="item_content">
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg" alt="">
<div class="cat_name3">曲面電視</div>
</a>
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/5e38cf9e6e7c46a17fe1c597a883ae627977b296.jpg" alt="">
<div class="cat_name3">海信</div>
</a>
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/cece39bd7e9654c20043e4af71696e1f838d4a22.jpg" alt="">
<div class="cat_name3">夏普</div>
</a>
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/f62eba98423af3311487f3331c6798d8f099c893.jpg" alt="">
<div class="cat_name3">創(chuàng)維</div>
</a>
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/86832cc37db8474ac07853c835009f9873eaec89.jpg" alt="">
<div class="cat_name3">TCL</div>
</a>
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/41c169f14680b3ebf88b4a37ea09085ed731c985.jpg" alt="">
<div class="cat_name3">PPTV</div>
</a>
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/5c282c3ec283fbc092107f8c7b86f212365acdfa.jpg" alt="">
<div class="cat_name3">小米</div>
</a>
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/14291787e1f9f0215816048e813e4ec4fbb3dffe.jpg" alt="">
<div class="cat_name3">長虹</div>
</a>
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/de58455691bc7b85351055c220f1a5410ab15693.jpg" alt="">
<div class="cat_name3">康佳</div>
</a>
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/8b36730c09815e90de1f86664baef8690c89e979.jpg" alt="">
<div class="cat_name3">三星</div>
</a>
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/7643c31541df41da21c9e734bd2d9a18fed2a2aa.jpg" alt="">
<div class="cat_name3">飛利浦</div>
</a>
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/e8c76dd2bb103a620929bcb4ad5c5431d62418d3.jpg" alt="">
<div class="cat_name3">索尼</div>
</a>
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/5a46bef92bf32f0157b4d5a6d9a35ca8a5615aca.jpg" alt="">
<div class="cat_name3">先鋒</div>
</a>
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/5fae60f2cc05c53eaf43075db7eb82bfc9bba9b4.jpg" alt="">
<div class="cat_name3">家庭影院</div>
</a>
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/5515d491f88587084e59aac50010458bb916ee17.jpg" alt="">
<div class="cat_name3">音響</div>
</a>
<a href="javascript:;">
<img src="http://119.29.204.94:8888/full/e65bab9fcb64c336a3f5fba3b2174fef41f12330.jpg" alt="">
<div class="cat_name3">盒子</div>
</a>
</div>
下面使用原生es6寫法线椰,會發(fā)現(xiàn)在渲染多個(gè)a標(biāo)簽時(shí)胞谈,需要重新定義一個(gè)函數(shù)。就會導(dǎo)致結(jié)構(gòu)不清晰憨愉。寫不下去了烦绳。(o(╥﹏╥)o)。部分代碼如下:
//使用原生js
function render(){
var a = `<a href="javascript:;">
<img src="" alt="">
<div class="cat_name3">${data.cat_name}</div>
</a>`;
// li開始渲染多個(gè)a標(biāo)簽配紫,這時(shí)需要封裝函數(shù),顯得結(jié)構(gòu)不清晰
var li = ` <li>
<div class="item_title data-index="${index}">
<span>${data.cat_name}</span>
<span></span>
</div>
<div class="item_content">
${a}
</div>
</li>`;
}
最后不得已使用模板引擎径密,邏輯的都用{{}}
包起來。結(jié)構(gòu)與原始html基本相似躺孝。很優(yōu)雅享扔。(〃'▽'〃)。寫法如下:
//使用模板引擎,art-template@4.12.2
<li>
<div class="item_content">
{{each value.children item ind }}
<a href="javascript:;">
<img src="{{$imports.BaseURL}}{{item.cat_icon}}" alt="">
<div class="cat_name3">{{item.cat_name}}</div>
</a>
{{/each}}
</div>
</li>
<全文結(jié)束>