前端模板Handlerbar-白红宇

前端模板Handlerbar

阅读量：6435 次

发布时间：2019-06-23

本文共 914 字，大约阅读时间需要 3 分钟。

在使用时候, 遇到一些格式化时间这样的功能, 总会很麻烦.

比如:

{   "items":[       {         "title" : "标题1",         "createDate":"2016-06-10T15:48:00.000Z"       },       {         "title" : "标题2",         "createDate":"2016-06-10T18:48:00.000Z"       }   ]}

要想格式化列表里的时间createDate, 你必须要在数据对象中像这样注册一个handler:

{   items : ...   dateFromat : function(){       return moment(this.createDate).format('YYYY-MM-DD')    }}

每次做渲染的时候都必须重复注册handler,很是麻烦.

注册完后,使用handler的时候语法也很奇葩:

{
   {#items}}    {
   {title}}
    {
   {#dateFromat}}    {
   {formatDate createDate}}    {
   {/dateFromat}}{
   {/items}}

为此, 特意google了一下. 发现了另一个语法兼容mustache的前段模板, 和它的名字表达的一样, 可以方便的注册一堆handler.

使用方式很简单:

注册handler

Handlebars.registerHelper('formatDate', function(date) { return  moment(date).format('YYYY-MM-DD hh:mm:ss');});

渲染时调用handler

{
     {#items}} {
     {title}}
 {
     {formatDate createDate}}{
     {/items}}

ok.

另外,它提供的Html预编译成JavaScript也很方便.

不愧是大型前端工程的利器.

转载地址：http://xqhga.baihongyu.com/

你可能感兴趣的文章

【msdn wpf forum翻译】如何在wpf程序（程序激活时）中捕获所有的键盘输入，而不管哪个元素获得焦点？...

查看>>

全球首家！阿里云获GNTC2018 网络创新大奖成唯一获奖云服务商

查看>>

Python简单HttpServer

查看>>

Java LinkedList工作原理及实现

微信小程序的组件用法与传统HTML5标签的区别

查看>>

Hangfire 使用笔记

查看>>

(C#)Windows Shell 外壳编程系列8 - 同后缀名不同图标？

查看>>

教你彻底学会c语言基础——文件操作

查看>>

如何使用免费控件将Word表格中的数据导入到Excel中

查看>>

seafile服务器配置

查看>>

HyperLedger Fabric 1.2 区块链应用场景（3.1）

中国HBase技术社区第一届MeetUp-HBase2.0研讨圆桌会

查看>>

学渣的模块化之路——50行代码带你手写一个common.js规范

{ {title}}

{ {title}}

{
{title}}

{
{title}}