前端模板Handlerbar

k00baa 发布于2019-08-19 18:33 / 2487人阅读

摘要：在使用时候遇到一些格式化时间这样的功能总会很麻烦比如标题标题要想格式化列表里的时间你必须要在数据对象中像这样注册一个每次做渲染的时候都必须重复注册很是麻烦注册完后使用的时候语法也很奇葩为此特意了一下发现了另一个语法兼容的前

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

{
   "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的前段模板Handlerbar, 和它的名字表达的一样, 可以方便的注册一堆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功能也很方便.

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

云服务器混合云前端模板 Handlerbar 前端网站模板 web前端模板

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79699.html

HTML5移动端音乐播放器（启蒙篇）

摘要：前些天偷台风的闲暇时写了一个移动端音乐播放器，作为练手项目。有的歌词周杰伦算什么男人格式是时间点时间歌词创建映射首先以将歌词字符串分割成以时间点文字的数组，但由于这样分割之后最后一个元素是空的，所以用删除最后一个元素。这段时间公司一直在做一个PC的教育类单页应用，庞大复杂，涉及非常多H5的知识，音频就是其中的一部分。前些天偷台风的闲暇时写了一个移动端音乐播放器，作为练手项目。在线地...

waterc 2019-08-05 10:18 评论0 收藏0
HTML5移动端音乐播放器（启蒙篇）

摘要：前些天偷台风的闲暇时写了一个移动端音乐播放器，作为练手项目。有的歌词周杰伦算什么男人格式是时间点时间歌词创建映射首先以将歌词字符串分割成以时间点文字的数组，但由于这样分割之后最后一个元素是空的，所以用删除最后一个元素。这段时间公司一直在做一个PC的教育类单页应用，庞大复杂，涉及非常多H5的知识，音频就是其中的一部分。前些天偷台风的闲暇时写了一个移动端音乐播放器，作为练手项目。在线地...

Lin_R 2019-08-20 11:58 评论0 收藏0
常用的前端插件V1

摘要：轻量级，功能强大的日期选择器，兼容和不依赖于其他库，少，使用作为界面的图标兼容在配置参数中，所有的类型为或的参数都可以通过属性在标签中进行设置例如月份可以滚动，年份可以手动输入是否启用日期选择是否启用秒选择器设置日期显示格 some jquery plugins are used for labelMangerSystem,some things may not be complete...

xiao7cn 2019-08-20 16:16 评论0 收藏0
基于TmodJS的前端模板工程化解决方案

摘要：原作者唐斌腾讯什么原名是一个简单易用的前端模板预编译工具。本文作者为来自腾讯团队的唐斌，他在本文中为我们分析了传统前端模板内嵌的弊端，如开发调试效率低下自动化构建复杂度比较高等特点，并针对目前现状给出了较好的解决方案。原作者: 唐斌（腾讯）| TmodJS什么 TmodJS（原名atc）是一个简单易用的前端模板预编译工具。它通过预编译技术让前端模板突破浏览器限制，实现后端模板一样的同...

zhaochunqi 2019-08-20 13:35 评论0 收藏0
[聊一聊系列]聊一聊前端模板与渲染那些事儿

摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码作为现代应用，的大量使用，使得前端工程师们日常的开发少不了拼装模板，渲染模板。我们今天就来聊聊，拼装与渲染模板的那些事儿。一改俱改，一板两用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog...

UCloud 2019-08-19 18:45 评论0 收藏0