當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS模板引擎handlerbars入门

發布時間：2025/4/16 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS模板引擎handlerbars入门小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

handlebars? ?—— 前端的模板引擎

handlebars是如何改進上面的代碼的？？？請看下面的操作

數據結構為數組；則需要在模板中寫上???{{#each?this}}???{{/each}}

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="handlebars-v4.7.6.js"></script><script src="jQuery v3.5.1.js"></script><style>.card {font-size: 30px;float: left;margin: 20px;background-color: pink;}</style><script id="card-template" type="text/x-handlebars-template">{{#each this}}<div class="card"><div>姓名：{{name}}</div><div>出生日期:{{birth}}</div><div>出生地：{{home}}</div><div>職業：{{job}}</div> </div> {{/each}}</script> </head><body><div id="card"></div><script>var data = [{name: '無UR惡意法國人',birth: '1997-11-15',home: '美國洛杉磯',job: '網咯煩人符合'},{name: '止小兮',birth: '1999-11-15',home: 'dgr洛杉磯',job: '人的忍辱含垢'}]var t = $('#card-template').html(); // 1console.log(t);var f = Handlebars.compile(t); // 2console.log(f);var h = f(data); // 3$('#card').html(h); //4</script> </body></html>

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="handlebars-v4.7.6.js"></script><script src="jQuery v3.5.1.js"></script><style>.card {font-size: 30px;float: left;margin: 20px;background-color: pink;}</style><script id="card-template" type="text/x-handlebars-template">{{#each this}} <div class="card"><div>姓名：{{name}}</div>{{#if birth}}<div>出生日期:{{birth}}</div>{{/if}}<div>出生地：{{home}}</div>{{#if job}}<div>職業：{{job}}</div> {{/if}}<ul>{{#each books}}<li>{{this}}</li>{{/each}}</ul></div> {{/each}}</script> </head><body><div id="card"></div><script>var data = [{name: '無UR惡意法國人',birth: '1997-11-15',home: '美國洛杉磯',job: '網咯煩人符合',books:['《結構化土》','《幡然改途如何》','《熱湯4一頭熱好的》']},{name: '止小兮',birth: '1999-11-15',home: 'dgr洛杉磯',job: '人的忍辱含垢'},{name: '蒼小凌',home: 'dgr洛杉磯',books:['《三四個號》','《Rey遇到5護體乳問題熱議》']}]var t = $('#card-template').html(); // 1console.log(t);var f = Handlebars.compile(t); // 2console.log(f);var h = f(data); // 3$('#card').html(h); //4</script> </body></html>

總結

以上是生活随笔為你收集整理的JS模板引擎handlerbars入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： js的作用域
下一篇： Backnbone的入门基础——Back