需求：
實現(xiàn)下面這段html結(jié)構(gòu)，拿到數(shù)據(jù)后動態(tài)渲染html,這里數(shù)據(jù)比較多，因為數(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)在渲染多個a標(biāo)簽時，需要重新定義一個函數(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開始渲染多個a標(biāo)簽，這時需要封裝函數(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é)束>