JS模板引擎handlerbars入门
2024-05-19 03:57:57
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入门相关推荐
- cms概述 。比较shopex和ecshop区别 。smarty模板引擎的入门
cms概述 为了找到一个合适的cms网站系统,我花了一番功夫搜索了多种cms,包括我用过的和没用过的,知道的和不知道的,当然,必须是开源的.免费的.生成静态页面的.到各自的官方网站,查看了有关资料,下 ...
- swig模板 PHP,nodejs前端模板引擎swig入门
相对于jade,我还是更喜欢swig前端模板引擎,jade虽然语法简练高效了不少,但是在我这最大的问题是 他没有一个html该有的样子... 所以我还是决定使用swig,页面结构,样子都是熟悉的样子, ...
- js模板引擎art template数组渲染的方法
转载:js模板引擎art template数组渲染的方法 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,模板引擎种类也是五花八门,我就说几个安全性高.错误处理调 ...
- js模板引擎 之handlebars.js
最近在接触郑州知识库,里面使用到的技术是值得自己学习的. 该项目前端使用的是handlebars.js模板引擎框架.模板引擎框架用于数据与结构分离的思想,实现页面动态分离的效果. 1.为什么使用模板引 ...
- 解决laytpl.js模板引擎插件加载模板后无法获取模板中的元素id等内容
一.问题描述 在页面中使用laytpl.js模板引擎,在页面加载后无法使用jquery获取模板中的html元素,以下是图片和代码: 在添加或修改完毕后重新加载页面,不能使用jquery获取模板中的ht ...
- JS模板引擎sychelTemplate
sychelTemplate 简介 0.sychelTemplate希望创造一个用户觉得"简单好用"的JS模板引擎 注:等不及可以直接点左侧导航中的"C.使用举例&quo ...
- js模板引擎渐进--后记
至此,算是完成了一个系列了. 本来是想写的更详细的,但是太详细每次说的东西就少的可怜. 在学习的过程中,每次的改进改动博主都是复制一个新的文件进行,整个有二十多篇,中间有很多小细节的东西,集中在 ea ...
- js模板引擎Nunjucks
js模板引擎Nunjucks Nunjucks中文文档
- js模板引擎渐进--if/else（7）
有了 each 的经验后,要实现 if/else 这种指令就简单了-------在 case '}' 处对 varcode 进行指令的判断即可. 模板代码: {if data.value==1}&l ...
最新文章
- module是什么类型_nodejs中module.exports和exports的区别
- 【Matlab】for循环进度条显示百分比进程和剩余时间
- 【python自动化办公03】word操作-文档内容替换
- [loj6391][THUPC2018]淘米神的树（Tommy）
- Jupyter 绘图怎么显示中文
- 我的AutoHotkey配置
- python中静态方法存在的意义
- 录音机 在launcher中显示_「 腾讯 微信事业部 社招二面」——一个APP从启动到主页面显示经历了哪些过程？...
- MySQL-InnoDB-MVCC多版本并发控制 剖析
- 理解x86架构的捷径
- 从P1到P7——我在淘宝这7年 - 子柳撰写
- react视频播放组件
- 单龙芯3A3000-7A1000PMON研究学习-（3）初步编译
- 转载 | 各种数据库JDBC下载
- OSChina 周四乱弹 ——来我数数，你们中间有几只毛毛虫
- uos网页服务器安装,安装uos
- 最近研究NFC的总结
- k8s简单集群搭建和应用（包括虚拟机的开启）①
- 【Android -- 相机】Camera2 实现拍照 预览功能
- 2021年盐城高考成绩查询系统,2021年盐城工学院录取结果查询,附查询网址入口
热门文章
- Lua5.3手册标准库拾遗
- go例子(一) 使用go语言实现linux内核中的list_head
- 2 获取对象 IDbDataAdapter 用于填充 DataSet 和更新数据源
- 尝试去读SQLMAP源码（一）
- (原创)c#学习笔记08--面向对象编程简介01--面向对象编程的含义03--对象的生命周期--构造函数和析构函数...
- 高通平台耳机插拔检测
- 更改开机默认不显示explorer.exe，直接启动自己写的EXE程序方法
- [repost]Xcode因为证书问题经常报的那些错
- 【C语言】06-基本数据类型
- 309. Best Time to Buy and Sell Stock with Cooldown