首頁猿問請(qǐng)問關(guān)于前端模板原理

請(qǐng)問關(guān)于前端模板原理

JavaScript Html5

hy_wang 2018-04-11 16:02:33

請(qǐng)問這個(gè)模板原理是怎么樣實(shí)現(xiàn)的？使用html接受一個(gè)js腳本是什么意思以及請(qǐng)問data中那么多數(shù)據(jù)，可是模板中只有2個(gè)div這應(yīng)該怎么替換？沒有對(duì)應(yīng)的就不替換了嗎

查看完整描述

1 回答

碼農(nóng)2號(hào)

TA貢獻(xiàn)151條經(jīng)驗(yàn) 獲得超48個(gè)贊

在html里面遍歷，有多少數(shù)據(jù)就會(huì)有多少div。你的模板使用方法我沒驗(yàn)證對(duì)不對(duì)，但是絕對(duì)有局限性，我們都不是這樣用的。

反對(duì) 回復(fù) 2018-04-12

hy_wang
請(qǐng)教一下平常日常開發(fā)您都是怎么使用的萬分感謝

回復(fù) 2018-04-12
碼農(nóng)2號(hào)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板使用</title> </head> <body> <ul class="container"></ul>  <script type="text/html" id="tpl">  {{each data as v i}}  <li>{{v.xxx}}</li> {{/each}} </script>  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  <script src="./template.js"></script> <script> // 找到父元素,確定插入數(shù)據(jù)的位置 var container=$('.container'); $.ajax({ type: 'post', // url地址需要你自己寫，你需要請(qǐng)求的地址 url: 'xxxx', dataType: 'json', data: { //此處不傳參數(shù)可以不寫 }, async: false,//此行是同步異步的處理，一般不用寫 success: function (data) { // 打印一下獲取的data值 console.log(data); // 模板的渲染 //注意：tpl是上面<script type="text/html" id="tpl"></script>中的id，可以自己修改，但上下一定要一致 container.html(template("tpl", data)); } }) </script> </body> </html>

回復(fù) 2018-04-12
碼農(nóng)2號(hào)
很簡單的一個(gè)模板引用與渲染，自己調(diào)整一下自己的值

回復(fù) 2018-04-12