<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已经足够好用了，不要再到处乱看浪费时间了。的更多相关文章

  1. js模版引擎handlebars.js实用教程

    js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...

  2. Express学习 ------模版引擎(handlebars)

    Handlebars一款js模版引擎,我们在做客户端开发的时候,也可能已经使用过.它语法比较简单,和我们平常写的html 一样,只不过html 中可以加入handlebars 表达式. handleb ...

  3. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  4. 模版引擎Handlebars和Mustache

    Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用; 下面这个是基本的模版表达式, ...

  5. js模版引擎handlebars.js实用教程——each-基本循环使用方法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  6. js模版引擎handlebars.js实用教程——each-循环中使用this

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  7. js模版引擎handlebars.js实用教程——each嵌套

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  8. js模版引擎handlebars.js实用教程——循环中使用索引

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  9. js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  10. js模版引擎handlebars.js实用教程——with-终极this应用

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

随机推荐

  1. VUE子组件使用父组件值并赋值

    子组件使用父组件值,要改变使用用赋值方法,定义新变量: 定义新变量:copyTrendObj 此时copyTrendObj 可以被赋值 props: { trendObj: { type: Objec ...

  2. 基于JavaScript的OpenGL 01 之Hello Triangle

    1. 引言 本文基于JavaScript语言,描述OpenGL(即,WebGL)的绘制流程,这里描述的是OpenGL的核心模式(Core-profile) 笔者这里不过多描述每个名词.函数和细节,更详 ...

  3. postgreSQL开启数据库guid类型

    执行:create extension "uuid-ossp"; 即可使用:SELECT gen_random_uuid();或SELECT uuid_generate_v4()

  4. Kali配置gmssl密码算法库

    Kali配置gmssl密码算法库 一.密码算法库的下载 https://github.com/guanzhi/GmSSL/releases 二.安装配置 1 解压 把刚刚下载的GmSSL 3.0.0. ...

  5. gmlib密码算法库

    gmlib密码算法库 一.gmlib密码算法库简介 支持国密 SM4/AES-ECB/CBC/GCM,SM3,SM2签名/加密,ZUC算法 的密码库,文档页面GMLib Docs ,项目地址 gmli ...

  6. Windows 隐藏 远程桌面（连接栏）

    当我们在使用远程桌面控制的时候,远程桌面工具栏遮挡视线很烦人.这时候就很有必要隐藏了! 1.全屏时显示连接栏 勾选去掉 这样子远程桌面上方的连接栏就消失了. 那么我们怎么打开呢?所以就要写下来记住了. ...

  7. go语言初记2（备忘）

     看<Go入门指南>,这里讲得比较基础,针对go 1.0版,以下是一些我自己觉得特别和不容易理解的地方的摘抄!  上次有说到go里不同类型之间操作必须显示转换,int和uint不固定,所以 ...

  8. 在docker中，运行Jcmd命令，报错

    起因: 想调整JVM的设置,观察一下当前jvm进程的资源情况. 输入:docker exec -it xxxxx /bin/sh 输入: jcmd 1 help ,报错 com.sun.tools.a ...

  9. vue 使用路由component: () =＞import (‘ ‘)报错解决办法

    今天帮朋友调代码的时候,在人家的mac上面,项目没有任何错误,到我这里就出现 component: () =>import (' ')加载路由错误. 发现是import处报错, import 属 ...

  10. 【面试题】面试突击71：GET 和 POST 有什么区别？

    携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第4天,点击查看活动详情 GET 和 POST 是 HTTP 请求中最常用的两种请求方法,在日常开发的 RESTful 接口中,都能 ...