<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. 插头dp 模板

    [JLOI2009]神秘的生物 只需要维护连通情况,采用最小表示法,表示此格是否存在,也即插头是否存在 分情况讨论当前格子的轮廓线上方格子和左方格子状态,转移考虑当前格子选不选,决策后状态最后要能合法 ...

  2. 跳板攻击之：EarthWorm代理转发

    跳板攻击之:EarthWorm代理转发 目录 跳板攻击之:EarthWorm代理转发 1 EarthWorm官方介绍 2 官方使用方法: 2.1 环境 2.2 正向 SOCKS v5 服务器 2.3 ...

  3. Jenkins安装(Docker)版

    一.jenkins安装 1.查找,下载jenkins镜像文件 启动docker,查找Jenkins镜像文件 docker search jenkins 下载Jenkins镜像文件 docker pul ...

  4. NOIP2017 - D2T3 - phalanx

    按照思维难度加大和代码难度减小的顺序,我们来看这道题的不同做法. 若你无畏,我亦无畏 - 平衡树 平衡树简直是天然用来维护这种操作的--合并两个区间,提取一个值.我们可以对每个行的前 \(m-1\) ...

  5. Golang make和new的区别及实现原理详解

    在Go语言中,有两个比较雷同的内置函数,分别是new和make方法,二者都可以用来分配内存,那他们有什么区别呢?下面我们就从底层来分析一下二者的不同.感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助 ...

  6. redis 集群配置（从0到1）

    1.关闭配置文件 appendonly yes改为no 2.到redis目录下拷贝redis.conf文件 cp ./redis.conf ./7001/ cp ./redis.conf ./7002 ...

  7. 【python学习】PyQt基础学习以及一个信息论与编码课设实例

    这学期的信息论与编码的课设需要用编程语言实现霍夫曼.费诺以及香农编码,要具备在windows下的可视化操作界面,因此就选用PyQt作为开发工具,本篇博客记录一下PyQt的基础以及课设的实例 参考: & ...

  8. CF468E Permanent 题解

    考虑暴力状压 DP. 按行 DP,记录列哪些被选过,可以做到 \(O(2^kk^2)\). 注意到某一列扫完了之后这一列选没选过不重要,可以减少这里的状态. 简单优化一下,每次选择最少的一列,使这一列 ...

  9. git手记

    参照的是http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000这里的,git教程确实写得不 ...

  10. 客户端发送信息给服务器以及服务器接收客户端发来的信息（socket）

    服务器端: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...