handlebar 初学笔记

artTemplete tmod停止维护，不得不换一个html模板，初步选择handlebar，简单做笔记如下：

    var data ={area:'上海',users: [{name:'Tom',age:28},{name:'Lily',age:20}]}

1.循环

handlebar：

    {{#each users}}{{@index}}{{@key}} {{@first}}{{@last}}{{@root}}{{@level}}{{name}} {{age}}{{../area}}{{toUpperCase name}}{{/each}}

artTemplete：

        {{each users as item i}} {{item.name}}{{item.age}}{{item[0]}}{{name | toUpperCase}}{{/each}}或{{each users}}{{$value.name}}{{$value.age}}{{name | toUpperCase}}{{/each}}

总结：

1.开始符加‘#’
2.对象属性不需要像{{users.name}}，而是直接访问{{name}}
3.指定属性访问用‘@’，没有item缓存变量
4.helper 方法使用，helpler名前置不需要‘|’，参数空格传入，可多个
5.webpack helper使用方法：
loader后加路径参数，每个helper方法都是一个js文件，文件名为helper方法名

        {   test: /\.html$/,loader: "handlebars-loader?helperDirs[]=" + __dirname + "/script/helpers"}

2.逻辑判断

handlebar：

    {{#if name}}//dom code...{{/if}}

artTemplete：

        {{if name=='Tom'}}//dom code...{{/if}}{{if name=='Tom'}}//if code...{{else}}//else code...{{/if}}

总结：

1.需要加‘#’
2. if只能进行布尔判断，具体判断只能借助helper方法

handlebar 初学笔记相关推荐

python窗体设计插件_Python 界面生成器 wxFormBuilder 的入门使用（wxPython的界面设计工具的初学笔记）...
环境,Win10,python3.7.3,wxPython 4.0.4,wxFormBuilder 3.9 1.准备一个窗体. 点击wxformbuilder上方的标签"forms" ...
Lucene.Net 初学笔记 - 索引
上次随笔写的Lucene.Net 初学笔记 - 介绍,有许多前辈让我知道了Lucene.Net已经不再更新,最后的版本写到2.9.2,不过只更新在svn上.我上次下载是官方正式发布的版本,只有2.0. ...
0起步的摄影初学笔记
摄影初学笔记双镜头反光相机单镜头反光相机(单反) 光圈类似瞳孔大小景深成像范围小光圈大景深大光圈小景深 Av模式:光圈有限模式自己决定光圈大小左手动镜头调光圈右手相机调光圈光圈 ...
GAMMA初学笔记三
GAMMA初学笔记三简单记录下学习过程,以防后面自己忘记,如果有问题,欢迎大家交流留言. 一.语法记录 1.查看影像经纬度范围 SLC_corners 20190424.mli.par 2.拼接哨兵 ...
cocoscreator初学笔记001
cocoscrestor初学笔记由于工作原因需要学习cocoscreator基础进行简单的游戏制作,也因为时间原因,之前自学的unity3d也放置了许久,等有空了才能填之前unity3d学习的坑了. ...
Python初学笔记（第一学期学完c后和栗子一起学python)
Python初学笔记一.基本数据类型 1.整数 2.浮点数 3.字符串 4.布尔值(即"对"与"错"): 5.空值二.变量的定义 1.变量名 2.变量的定义 ...
ASP.NET MVC 初学笔记.3 MVC5、EF、RDLC实现报表操作
在ASP.NET的研究学习中又要用到报表,比如在OA系统里实现凭证.文件等,报表是一个必不可少的东西,但百度了一圈,发现讲得最多的还是水晶报表等第三方报表,好像微软原装的RDLC报表随着MVC的升级渐 ...
CMake初学笔记（一）
CMake初学笔记(一) CMake是什么 CMake怎么实现跨平台 CMake具体实践过程 CMakeLists.txt编写快速入门常见函数例子 CMake是什么跨平台编译工具,为了实现&qu ...
Altium Designer 初学笔记
Altium Designer 初学笔记–从零开始发厂打印新手初学AD,此博客作为初学笔记,供日后复习及分享学习经验使用.如有不足,恳请指正. 软件:Altium Designer20 一.新建工程 ...

handlebar 初学笔记

1.循环

总结：

2.逻辑判断

总结：

handlebar 初学笔记相关推荐

最新文章

热门文章