给自己提个醒,渲染模版引擎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=" ...
随机推荐
- 3D场景建模
在这个虚拟现实的世界里,我们将会和你一起在云端构建属于自己的世界. 这里有一款3D场景编辑器可以让你在上面进行编辑.设计及渲染. 它是一个非常炫酷的软件,在这里,你可以尽情发挥你的想象力,创造出独一无 ...
- “堆内存持续占用高 且 ygc回收效果不佳” 排查处理实践
作者:京东零售 王江波 说明:部分素材来源于网络,数据分析全为真实数据. 一. 问题背景 自建的两套工具,运行一段时间后均出现 内存占用高触发报警,频繁young gc且效果不佳.曾经尝试多次解决,因 ...
- k8s-分布式系统架构master-worker
K8S系列一:概念入门 - 知乎 (zhihu.com) 大白话先了解k8s. k8s是为容器服务而生的一个可移植容器的编排管理工具 概述 Master-Workers 架构(粗译为主从架构)是分布式 ...
- pyinstaller打包Python程序报错OSError: Python library not found: libpython3.8.so, libpython3.8m.so
重新编译python(不影响原来安装的库文件),加入--enable-shared ./configure --prefix=/usr/local/python3 --enable-shared然后m ...
- AppCrawler自动遍历工具,适用于移动端
AppCrawler下载链接:https://github.com/seveniruby/AppCrawler,主要用途是回归遍历.原则从中间元素开始遍历 AppCrawler框架引擎 appium ...
- nodejs 后台运行 forever
一.安装nodejs //安装必要的make以及gcc,gcc-c++编译器 yum -y install make gcc gcc-c++ //获取源码 wget http://nodejs.org ...
- c++练习270题:三角形个数
*270题 原题传送门:http://oj.tfls.net/p/270 题解: #include<bits/stdc++.h>using namespace std;int a,b,c, ...
- Wifi Display
wifi display常用术语 AP:wifi access point Primary Sink: a device that supports rendering video content o ...
- 收缩SqlServer数据库日志语句
收缩SqlServer数据库日志SQL语句 USE[master] ALTER DATABASE XXX SET RECOVERY SIMPLE WITH NO_WAIT ALTER DATABASE ...
- 题解[LuoguP5591]小猪佩奇学数学
题解[LuoguP5591]小猪佩奇学数学 前置知识 基本数论推式子能力,如分配律结合律等 等比数列求和 \(\sum_{i=a}^bx^i=\dfrac{x^{b+1}-x^a}{x-1}\) 二项 ...