當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS模板引擎handlerbars入门
生活随笔
收集整理的這篇文章主要介紹了
JS模板引擎handlerbars入门
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
handlebars? ?—— 前端的模板引擎
<!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> </head> <body><!-- div.card > div*4 --><div class="card" id="card"><!-- <div>姓名：無UR惡意法國人</div><div>出生日期:1997-11-15</div><div>出生地：美國洛杉磯</div><div>職業：網咯煩人符合</div> --></div><script>var data={name:'無UR惡意法國人',birth:'1997-11-15',home:'美國洛杉磯',job:'網咯煩人符合'}var str='';str+='<div>姓名：'+data.name+'</div>';str+='<div>出生日期：'+data.birth+'</div>';str+='<div>出生地：'+data.home+'</div>';str+='<div>職業：'+data.job+'</div>';$('#card').html(str);</script> </body> </html>
handlebars是如何改進上面的代碼的？？？請看下面的操作
<!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"><div>姓名：{{name}}</div><div>出生日期:{{birth}}</div><div>出生地：{{home}}</div><div>職業：{{job}}</div> </script> </head><body><!-- div.card > div*4 --><div class="card" id="card"></div><script>var data = {name: '無UR惡意法國人',birth: '1997-11-15',home: '美國洛杉磯',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>數據結構為 數組；則需要在模板中寫上???{{#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.card > div*4 --><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 -->{{#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.card > div*4 --><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