handlebar基本使用
2024-04-22 19:13:15
- each
<!DOCTYPE html>
<html><head><META http-equiv=Content-Type content="text/html; charset=utf-8"><title>each-基本循环使用方法 - by 杨元</title></head><body><h1>each-基本循环使用方法</h1><!--基础html框架--><table><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody id="tableList"></tbody></table><!--插件引用--><script type="text/javascript" src="script/jquery.js"></script><script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script><!--Handlebars.js模版--><!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句--><!--id可以用来唯一确定一个模版,type是模版固定的写法--><script id="table-template" type="text/x-handlebars-template">{{#each student}}<tr><td>{{name}}</td><td>{{sex}}</td><td>{{age}}</td></tr> {{/each}}</script><!--进行数据处理、html构造--><script type="text/javascript">$(document).ready(function() {//模拟的json对象var data = {"student": [{"name": "张三","sex": "0","age": 18},{"name": "李四","sex": "0","age": 22},{"name": "妞妞","sex": "1","age": 18}]};//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。var myTemplate = Handlebars.compile($("#table-template").html());//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。$('#tableList').html(myTemplate(data));});</script></body>
</html>- each-this
<!DOCTYPE html>
<html>
<head><META http-equiv=Content-Type content="text/html; charset=utf-8"><title>each-循环中使用this - by 杨元</title>
</head>
<body>
<h1>each-循环中使用this</h1>
<!--基础html框架-->
<table><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody id="tableList"></tbody>
</table><!--插件引用-->
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script><!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">{{#each this}}<tr><td>{{name}}</td><td>{{sex}}</td><td>{{age}}</td></tr><tr><td><input type="text" value="{{name}}"></td><td><input type="text" value="{{sex}}"></td><td><input type="text" value="{{age}}"></td></tr>{{/each}}
</script><!--进行数据处理、html构造-->
<script type="text/javascript">$(document).ready(function () {//模拟的json对象var data = [{"name": "张三","sex": "0","age": 18},{"name": "李四","sex": "0","age": 22},{"name": "妞妞","sex": "1","age": 18}];//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。var myTemplate = Handlebars.compile($("#table-template").html());//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。$('#tableList').html(myTemplate(data));});
</script>
</body>
</html>- escape
<!DOCTYPE html>
<html>
<head><META http-equiv=Content-Type content="text/html; charset=utf-8"><title>关于HTML编码 - by 杨元</title>
</head>
<body>
<h1>关于HTML编码</h1>
<!--基础html框架-->
<table><thead><tr><th>姓名</th><th>性别</th><th>年龄</th><th>个人主页</th></tr></thead><tbody id="tableList"></tbody>
</table><!--插件引用-->
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script><!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">{{#each student}}<tr><td>{{name}}</td><td>{{sex}}</td><td>{{age}}</td><td>{{homePage}}</td><td>{{{homePage}}}~~~~~~~~~</td>{{#compare age 20}}<td>{{homePage}}</td>{{else}}<td>{{{homePage}}}</td>{{/compare}}</tr>{{/each}}
</script><!--进行数据处理、html构造-->
<script type="text/javascript">$(document).ready(function () {//模拟的json对象var data = {"student": [{"name": "张三","sex": "0","age": 18,"homePage": "<a href='javascript:void(0);'>张三的个人主页</a>"},{"name": "李四","sex": "0","age": 22,"homePage": "<a href='javascript:void(0);'>李四的个人主页</a>"},{"name": "妞妞","sex": "1","age": 19,"homePage": "<a href='javascript:void(0);'>妞妞的个人主页</a>"}]};//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。var myTemplate = Handlebars.compile($("#table-template").html());//注册一个比较数字大小的Helper,有options参数，块级HelperHandlebars.registerHelper("compare", function (v1, v2, options) {//判断v1是否比v2大if (v1 > v2) {//继续执行return options.fn(this);} else {//执行else部分return options.inverse(this);}});//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。$('#tableList').html(myTemplate(data));});
</script>
</body>
</html>- if
<!DOCTYPE html>
<html><head><META http-equiv=Content-Type content="text/html; charset=utf-8"><title>if-判断的基本用法 - by 杨元</title></head><body><h1>if-判断的基本用法</h1><!--基础html框架--><table><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody id="tableList"></tbody></table><!--插件引用--><script type="text/javascript" src="script/jquery.js"></script><script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script><!--Handlebars.js模版--><!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句--><!--id可以用来唯一确定一个模版,type是模版固定的写法--><script id="table-template" type="text/x-handlebars-template">{{#each student}}{{#if name}}<tr><td>{{name}}</td><td>{{sex}}</td><td>{{age}}</td></tr>{{/if}}{{/each}}</script><!--进行数据处理、html构造--><script type="text/javascript">$(document).ready(function() {//模拟的json对象var data = {"student": [{"name": "张三","sex": "0","age": 18},{"sex": "0","age": 22},{"name": "妞妞","sex": "1","age": 18}]};//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。var myTemplate = Handlebars.compile($("#table-template").html());//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。$('#tableList').html(myTemplate(data));});</script></body>
</html>- if-helper-compare
<!DOCTYPE html>
<html><head><META http-equiv=Content-Type content="text/html; charset=utf-8"><title>由于if功力不足引出的Helper - by 杨元</title></head><body><h1>由于if功力不足引出的Helper</h1><!--基础html框架--><table><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody id="tableList"></tbody></table><!--插件引用--><script type="text/javascript" src="script/jquery.js"></script><script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script><!--Handlebars.js模版--><!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句--><!--id可以用来唯一确定一个模版,type是模版固定的写法--><script id="table-template" type="text/x-handlebars-template">{{#each student}}{{#if name}}{{#compare age 20}}<tr><td>{{name}}</td><td>{{sex}}</td><td>{{age}}</td></tr>{{else}}<tr><td>?</td><td>?</td><td>?</td></tr>{{/compare}}{{/if}}{{/each}}</script><!--进行数据处理、html构造--><script type="text/javascript">$(document).ready(function() {//模拟的json对象var data = {"student": [{"name": "张三","sex": "0","age": 23},{"sex": "0","age": 22},{"name": "妞妞","sex": "1","age": 18}]};//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。var myTemplate = Handlebars.compile($("#table-template").html());//注册一个比较大小的Helper,判断v1是否大于v2Handlebars.registerHelper("compare",function(v1,v2,options){if(v1>v2){//满足添加继续执行return options.fn(this);}else{//不满足条件执行{{else}}部分return options.inverse(this);}});//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。$('#tableList').html(myTemplate(data));});</script></body>
</html>- if-helper-transformat
<!DOCTYPE html>
<html><head><META http-equiv=Content-Type content="text/html; charset=utf-8"><title>另一种Helper用法 - by 杨元</title></head><body><h1>另一种Helper用法</h1><!--基础html框架--><table><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody id="tableList"></tbody></table><!--插件引用--><script type="text/javascript" src="script/jquery.js"></script><script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script><!--Handlebars.js模版--><!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句--><!--id可以用来唯一确定一个模版,type是模版固定的写法--><script id="table-template" type="text/x-handlebars-template">{{#each student}}{{#if name}}{{#compare age 20}}<tr><td>{{name}}</td><td>{{transformat sex}}</td><td>{{age}}</td></tr>{{else}}<tr><td>?</td><td>?</td><td>?</td></tr>{{/compare}}{{/if}}{{/each}}</script><!--进行数据处理、html构造--><script type="text/javascript">$(document).ready(function() {//模拟的json对象var data = {"student": [{"name": "张三","sex": "0","age": 23},{"name": "李四","sex": "0","age": 18},{"name": "妞妞","sex": "1","age": 21}]};//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。var myTemplate = Handlebars.compile($("#table-template").html());//注册一个比较大小的Helper,判断v1是否大于v2Handlebars.registerHelper("compare",function(v1,v2,options){if(v1>v2){//满足添加继续执行return options.fn(this);}else{//不满足条件执行{{else}}部分return options.inverse(this);}});//注册一个翻译用的Helper，0翻译成男，1翻译成女Handlebars.registerHelper("transformat",function(value){if(value==0){return "男";}else if(value==1){return "女";}});//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。$('#tableList').html(myTemplate(data));});</script></body>
</html>- with
<!DOCTYPE html>
<html><head><META http-equiv=Content-Type content="text/html; charset=utf-8"><title>with-进入到某个属性(进入到某个上下文环境) - by 杨元</title></head><body><h1>with-进入到某个属性(进入到某个上下文环境)</h1><!--基础html框架--><table><thead><tr><th>姓名</th><th>性别</th><th>年龄</th><th>兴趣爱好</th></tr></thead><tbody id="tableList"></tbody></table><!--插件引用--><script type="text/javascript" src="script/jquery.js"></script><script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script><!--Handlebars.js模版--><!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句--><!--id可以用来唯一确定一个模版,type是模版固定的写法--><script id="table-template" type="text/x-handlebars-template">{{#each this}}<tr><td>{{name}}</td><td>{{sex}}</td><td>{{age}}</td><td>{{#with favorite}}{{#each this}}<p>{{name}}</p>{{/each}}{{/with}}</td></tr> {{/each}}</script><!--进行数据处理、html构造--><script type="text/javascript">$(document).ready(function() {//模拟的json对象var data = [{"name": "张三","sex": "0","age": 18,"favorite":[{"name":"唱歌"},{"name":"篮球"}]},{"name": "李四","sex": "0","age": 22,"favorite":[{"name":"上网"},{"name":"足球"}]},{"name": "妞妞","sex": "1","age": 18,"favorite":[{"name":"电影"},{"name":"旅游"}]}];//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。var myTemplate = Handlebars.compile($("#table-template").html());//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。$('#tableList').html(myTemplate(data));});</script></body>
</html>- with-this
<!DOCTYPE html>
<html>
<head><META http-equiv=Content-Type content="text/html; charset=utf-8"><title>with-终极this应用 - by 杨元</title>
</head>
<body>
<h1>with-终极this应用</h1>
<!--基础html框架-->
<table><thead><tr><th>姓名</th><th>性别</th><th>年龄</th><th>兴趣爱好</th></tr></thead><tbody id="tableList"></tbody>
</table><!--插件引用-->
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script><!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">{{#each this}}<tr><td>{{name}}</td><td>{{sex}}</td><td>{{age}}</td><td>{{#with favorite}}{{#each this}}<p>{{this}}</p>{{/each}}{{/with}}</td></tr>{{/each}}
</script><!--进行数据处理、html构造-->
<script type="text/javascript">$(document).ready(function () {//模拟的json对象var data = [{"name": "张三","sex": "0","age": 18,"favorite":["唱歌","篮球"]},{"name": "李四","sex": "0","age": 22,"favorite":["上网","足球"]},{"name": "妞妞","sex": "1","age": 18,"favorite":["电影","旅游"]}];//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。var myTemplate = Handlebars.compile($("#table-template").html());//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。$('#tableList').html(myTemplate(data));});
</script>
</body>
</html>handlebar基本使用相关推荐
- handlebar的一些用法——个人使用总结
handlebar的一些用法 概述与介绍 Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less t ...
- handlebar的简单使用及方法
handlebar是一款高效的模板引擎,他主要用于我们在重复使用和替换数据信息的时候能用一套模板的方式将他表示出来,一般我们前端需要前后端的交互,所以在这里我就介绍一下handlebar的使用方法. ...
- Handlebar嵌套遍历数据
通过两层 {{#each}}来进行实现, 对应handlebar模版 <script id="productTypeBean" type="text/x-handl ...
- handlebar,js简单使用
很久之前使用handlebar,js来开发webapp,现在在当时忘记写下来,想起来还是挺有趣的. handlebar.js一种模板引擎.当时因为不太熟悉vue,也不知道脑子是怎么想的.就在网上找到h ...
- Handlebar如何多条件判断
最近公司让做项目的基本信息的增删改查 然后前端用的框架是Handlebar 有一个问题就是 后端传过来的数据是数字 但是在前台展示的时候需要把数字换成对应的字句进行展示 存储的时候需要存对应的数字 数 ...
- handlebar helper帮助方法
handlebars相对来讲算一个轻量级.高性能的模板引擎,因其简单.直观.不污染HTML的特性.另一方面,handlebars作为一个logicless的模板,不支持特别复杂的表达式.语句,只内置了 ...
- handlebar.js模板引擎（轻页面小工程可用）
介绍 Handlebars 让你能够有能力高效地容易地创立语义化的模版.Handlebars兼容Mustache语法,在大多数情况下它可以读取Mustache的语法并在你当前模板中使用.具体点击这里 ...
- handlebar 初学笔记
artTemplete tmod停止维护,不得不换一个html模板,初步选择handlebar,简单做笔记如下: var data ={area:'上海',users: [{name:'Tom',ag ...
- handlebar.js使用
官方网站:http://handlebarsjs.com/ 下载及查看使用帮助,或者用百度cdn引用 一.定义模板 <script id="entry-template" t ...
- 弱逻辑的Handlebar实现简单判断逻辑需要自定义Helper
比如说我要在页面上当符合一些简单条件的情况下显示一个"合同"按钮,不符合的情况下"合同"按钮变灰: 首先要在JS里面定义helper: app.js: .... ...
最新文章
- 微信小程序把后台传过来的数组坐标展示在地图上
- 【python教程入门学习】如何把Python学好
- 如何用度量影响敏捷环境
- deedeedee crazy 寒假逆向生涯（11/100）
- esxi 修改服务器配置失败,R720服务器安装 ESXI 5.5update1后出现XXX错误
- 【BZOJ2989】数列（CDQ分治，扫描线）
- 如何更改 Safari 浏览器文件下载位置？
- Zotero | zotero与endnote题录与pdf文件的完整互转（2）
- 树莓派的GPIO等接口
- nm 命令输出项解析
- 抖音xlog算法解析
- 红外LED的主要参数及选型参考
- Java课程大作业设计：实现联网对战、实时聊天、多线程编程的五子棋项目
- 聚观早报 | iPhone接口将与安卓统一；《三体》动画定档12月3日
- SuperMap iClient3D for WebGL教程-管线流动特效
- echarts 地图 海南诸岛只显示上面一小块，可以看一下图例边框颜色以及背景颜色是否相同。
- openGauss理事会筹备会圆满成功
- 【Fluent】雷诺方程：推导与求解（附MATLAB代码）
- 查看Ubuntu系统是多少位
- CISAW是什么？CISAW有什么优势？CISAW的价格？