给自己提个醒，渲染模版引擎handlebars已经足够好用了，不要再到处乱看浪费时间了。
<html>
<body onload="renderHello()">
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Handlebars <b>{{doesWhat}}</b> <br>
{{loudHelper doesWhat}} <br>
{{{timeHelper time}}} <br>
{{time}} <br>
{{{listHelper names}}} <br>
{{#listHelper names}}
<b>{{firstName}}</b>
{{/listHelper}}
</script>
<br>
<br>
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.min.js"></script>
<script>
function toDateString(values,field){
if (!field || !values){
return "";
}
field = field.trim();
var value = values[field];
if (!value){
return "";
}
var d = new Date(value);
return d.toDateString();
}
var tableColumns = [
{
title:"xxNo",
cell:"Handlebars: <div data-click='emit:aaa:aaa' href='/sss/sdsds'>xxNo: {{xxNo}}</div><div>yyNo: {{yyNo}}</div><div>日期: {{{timeHelper time}}}</div>",
}
];
function renderHello() {
var template = document.getElementById('template').innerHTML;
var compiled = Handlebars.compile(template);
Handlebars.registerHelper('loudHelper', function (aString) {
return aString.toUpperCase()
})
Handlebars.registerHelper('timeHelper', function (t) {
return new Date(t).toDateString();
})
Handlebars.registerHelper("listHelper", function(items, options) {
const itemsAsHtml = items.map(item => {
let s = item;
if (typeof options.fn === "function"){
const s1 = options.fn(item).trim();
if (s1.length > 0){
s = s1;
}
}
return "<li>" + s + "</li>"
});
return "<ul>\n" + itemsAsHtml.join("\n") + "\n</ul>";
});
document.getElementById('target').innerHTML = compiled({
doesWhat: "rocks!",
time: Date.now(),
names: [
"bbb",
{firstName:'fff'}
]
});
}
</script>
</body>
</html>
给自己提个醒，渲染模版引擎handlebars已经足够好用了，不要再到处乱看浪费时间了。的更多相关文章
- js模版引擎handlebars.js实用教程
js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...
- Express学习 ------模版引擎(handlebars)
Handlebars一款js模版引擎,我们在做客户端开发的时候,也可能已经使用过.它语法比较简单,和我们平常写的html 一样,只不过html 中可以加入handlebars 表达式. handleb ...
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...
- 模版引擎Handlebars和Mustache
Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用; 下面这个是基本的模版表达式, ...
- js模版引擎handlebars.js实用教程——each-基本循环使用方法
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- js模版引擎handlebars.js实用教程——each-循环中使用this
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- js模版引擎handlebars.js实用教程——each嵌套
<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...
- js模版引擎handlebars.js实用教程——循环中使用索引
<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...
- js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- js模版引擎handlebars.js实用教程——with-终极this应用
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
随机推荐
- vs修改默认端口
1.右键项目属性进去修改 2.,用txt打开sln解决方案,框框中的就是你当前的端口号
- CSS less转CSS
less 转css代码格式cmd命令: lessc D:\workspace\ipad\index.less D:\workspace\ipad\index.css
- Windows 注册表是什么
注册表的概念 历史发展 在 Windows 3.x 操作系统中,注册表是一个极小文件,其文件名为 Reg.dat,里面只存放了某些文件类型的应用程序关联,大部分的设置是被放在 win.ini.syst ...
- ASP判断一个字符是否为汉字的两种方法
有的时候我们要求用户一定要输入汉字的信息,比如姓名和地址.那么,如何判断一个字符是不是汉字呢?其实在asp中至少有两种方法: 一.直接将某字符用asc转为ascii码,如果是英文,他应该是0-127的 ...
- 使用Vue来制作导航栏超级简单
在我们还没有学习Vue的时候一般都是使用JQ来制作导航栏,但是太复杂. 而使用Vue 来制作你会发现异常简单话不多说上代码 css代码随便写一写样式 HTML 部分,要给div设置一个ID 这里面 ...
- 在stm32中使用printf
记录使用printf的方法 1.配置GPIO GPIO_InitTypeDef GPIO_InitStruct; RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA ...
- swiper滑动异常
遇到这样的情况,一共5张slide,但是从第三个起再往右划就不动了.后来发现是已经初始化swiper后又追加了slide.(大概意思是这样.太久的程序了,也不想仔细捋了) 暂且用到的办法: 先定义好: ...
- Bug Bash测试
愿望 养成参加 Bug Bash 的习惯,就像养成到点就吃饭一样的习惯. 一.Bug Bash 名词解释 A Bug Bash is a collaborative effort across o ...
- foreach 和for
"foreach和for循环如果只是遍历集合或者数组,用foreach好些,如果是对集合中的值进行修改,就要用for循环了,其实foreach的内部原理其实也是Iterator,但不能像It ...
- CSS3图片自适应各种尺寸的屏幕
img { max-width: 100%; height: auto;} 设置最大宽度,高度自适应.