<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. P5787 二分图 /【模板】线段树分治

    \(\text{Solution}\) 线段树分治的模板 对时间分治,线段树下标表示时间 在线段树上处理每条覆盖当前区间的边,对当前的时间区间求答案 小区间的信息可以由大区间一路下来得到,那么答案就是 ...

  2. 跳板攻击之：ICMP代理转发与反弹shell

    跳板攻击之:ICMP代理转发与反弹shell 郑重声明: 本笔记编写目的只用于安全知识提升,并与更多人共享安全知识,切勿使用笔记中的技术进行违法活动,利用笔记中的技术造成的后果与作者本人无关.倡导维护 ...

  3. python爬取网页的多种方式以及保存方法

    爬取网页信息并保存 bs4和lxml都是用来将接收的数据解析html 1.bs4+excel(openpyxl): import requests from bs4 import BeautifulS ...

  4. vue element-table滚动条样式修改

    .table_class{ &::v-deep { .el-table__body-wrapper::-webkit-scrollbar { /*width: 0;宽度为0隐藏*/ width ...

  5. CSS 子代选择器(>)

    后代选择器 后代选择器?是一种多个用空格分隔的选择器,别称包含选择器.范围是当前节点的所有子节点,包括其直接子节点. div#app下的所有 div 元素都使用下面的样式: div#app div { ...

  6. ABP微服务系列学习-搭建自己的微服务结构（一）

    在原本的结构里面,由于默认服务引用的都是ABP原生的模块,所以结构目录里面没有包含modules目录,这里我们添加一个modules目录,用于存放我们的自定义模块.在shared里面,我们再抽一个Ev ...

  7. Git介绍下载安装以及基本使用

    目录 一.git介绍 二.下载安装git软件 三.基本使用 四.制作忽略文件 五.Git.Gitee.GitHub.Gitlab.bitbucket的区别 六.基础代码操作分类 一.git介绍 git ...

  8. php连接Access数据库

    最近想把一个asp的网站改成php的,无奈空间不支持mysql数据库,只好用access数据库了,但以前都是用的php+mysql,php+access数据库编程还真没有做过.感谢党,感谢cctv,感 ...

  9. Google Webstore Config

    1.使用Edge浏览.下载并安装 iGG谷歌访问助手 - Microsoft Edge Addons 登录https://microsoftedge.microsoft.com/addons/sear ...

  10. winform应用程序

    1.winform桌面应用程序是一种智能的客户端技术,我们可以使用winform应用程序帮助我们获得信息或者传输信息等 2.属性 Names:在后台要获得前台的控件对象,需要使用Name属性 Visi ...