[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.replies",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"replies",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","LeeWgg","page",1,"limit",50,"total","id","26591","avatar_url","https://avatars0.githubusercontent.com/u/15979377?v=4","githubUsername","create_at","2017-01-09 02:50:47.725","score",35,"topic_count","reply_count",6,"is_star",false,{"_20":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":33,"_30":49,"_50":51,"_25":52,"_53":54},"16004","author_id","17673","tab","share","content","![handlebars.png](//static.cnodejs.org/Fii9feirHgOxDBCqutO8-GOSTMpT)\r\n>提示：文中 “{ {” 、“} }”，在实际使用中用双花括号，中间无空格。\r\n\r\n写这篇文章也是因为当初我为了实现一个模板分页的某个功能（这个问题以及解决方法最后说），花了不少时间将官网看了几遍，试验了很久之后依然没有成功，然后凭着一股崛起继续钻研终于解决了这个问题。此时发现handlebars的东西基本上也了解得差不多了，所以干脆抽时间写篇文章整理一下。\r\n\r\n# 为什么需要模板引擎\r\n\r\n关于前端的模板引擎，我用一个公式来解释\r\n\r\n 模板引擎 \r\n 模板 + 数据 ========> html页面\r\n\r\n模板引擎就像是html的解析生成器，将对应的模板填充完数据之后生成静态的html页面。它可以在浏览器端（比如angular中指令所用的模板）也可以在服务器端执行，不过一般用于服务器端。因为它的一个作用是抽象公共页面来重用，如果在服务端填充数据，可以减少回填数据给页面的ajax请求，从而提升浏览器端整体页面渲染速度。\r\n\r\n# 那些年我用过的模板引擎\r\n\r\n接触过的模板引擎不算多，最早应该是jsp，本质上也是一种模板引擎，再到功能稍微强大的freemarker，这两种都是属于java语系的。js语系的jade和ejs我都有所接触，不过不常用，jade那种类python的语法规则以及较低的解析效率都让我不敢兴趣，Express框架也只是早起将其作为模板引擎。后来换成了强大的ejs，无论是功能还是写法上都接近jsp了。直到最新的Express4发布，默认改为了弱逻辑的比较简洁的模板引擎handlebars。\r\n\r\n我使用handlebars有以下几个原因：\r\n* 这次新项目前端框架搭建基于Express4，模板引擎只能在ejs/jade/hogan/hbs中选择一个。\r\n* 默认是handlebars，虽不知道原因，想必有其原因。\r\n* 看过“去哪儿”的前端技术分享，他们就是在handlebars上进行封装的，证明已经有人填过坑了，可以一试。\r\n* 开始比较看好ejs，但是官网文档被强了，相比之下handlebars的文档比较清晰，还有实例，虽然逻辑结构比较混乱，但是基本无障碍。\r\n\r\n# 码解handlebars\r\n\r\n运行环境：Express4、hbs4\r\n未接触Express或hbs的可以先看[这里](http://www.expressjs.com.cn/4x/api.html#res.render)\r\n\r\n## 初级玩家：表达式\r\n\r\n数据：\r\n\r\n { \r\n title: 'Express', \r\n obj:{\r\n version: 'v4.3', \r\n category: 'node', \r\n \"date~\": '2016'\r\n }\r\n }\r\n\r\n模板：\r\n\r\n

{ {title} }

\r\n

{ {obj.version} }

\r\n

{ {obj/category} }

\r\n

{ {obj.date~} }

\r\n\r\nhtml页面：\r\n\r\n Express\r\n v4.3\r\n node\r\n\r\nhandlebars中变量都添加双花括号来表示（类似Angular），对比ejs的\"<%%>\"来说看起来没什么区别，其实这是很人性化的，想一下你键盘上的位置，再考虑按这几个字符的难易程度你就懂了。\r\n其中要访问变量的属性值时可以用类似json格式的\".\"，也可以用\"/\"。\r\n\r\n*其中变量名不可包含以下字符。如果包含则不被解析，如上的\"\\{\\{obj.date~\\}\\}\"。*\r\n\r\n 空格 ! \" # % & ' ( ) * + , . / ; < = > @ [ \\ ] ^ ` { | } ~\r\n\r\n但可以用 **\"** , **'** , **[]** 来转译这些特殊字符。\r\n\r\n这一条规则意味着 **\"&&\",\"||\",\"!\"这类逻辑判断是不能出现在表达式中的！** （看着这一条是不是觉得弱爆了，要不然怎么叫若逻辑模板引擎呢~哈哈，不过当然有另外的解决办法）。\r\n\r\n## 中级玩家：helper\r\n\r\n英语水平有限，实在找不到一个恰当的词来翻译它了。可以理解为它是注入到模板中的一个函数，用来接收参数并进行逻辑处理。\r\n\r\n### 默认helper\r\n#### if else\r\n\r\n```\r\n { {#if author} }\r\n

{ {firstName} } { {lastName} }

\r\n { {else} }\r\n

Unknown Author

\r\n { {/if} }\r\n```\r\n\r\n```\r\n{ {#if isActive} }\r\n $\"Active\"$ \r\n{ {else if isInactive} }\r\n $\"Inactive\"$ \r\n{ {/if} }\r\n```\r\n\r\n和一般的编程语言的 **if-else** 代码块是差不多的，不过再次重申由于上面提到的特殊字符，所以if条件中是不能有逻辑表达式的，只能是变量或者值。\r\n\r\n#### unless\r\n\r\n还是因为上面提到的那些字符，handlebars不支持逻辑非(\"!\")，所以又有了一个与if相反的helper\r\n\r\n```\r\n { {#unless license} }\r\n

WARNING: This entry does not have a license!

\r\n { {/unless} }\r\n```\r\n\r\n上面这段代码就等价于\r\n\r\n```\r\n{ {#if license} }\r\n{ {else} }\r\n

WARNING: This entry does not have a license!

\r\n{ {/if} }\r\n```\r\n\r\n#### each\r\n\r\n都知道each相当于for循环。不过有些地方需要注意：\r\n* 可以用相对路径的方式来获取上一层的上下文。（上下文概念跟js中的上下文差不多，比如在each passage代码块内，每一次循环上下文一次是passage[0],passage[1]...）\r\n* 一些默认变量，@first/@last 当该对象为数组中第一个/最后一个时返回真值。如果数组成员为值而非对象，@index表示当前索引值，可以用@key或者this获取当前值\r\n* 可以用 `as |xxx|`的形式给变量起别名，循环中通过别名可以引用父级变量值。当然也可以通过相对路径的方式引用父级变量。\r\n```\r\n{ {#each passage} }\r\n { {#each paragraphs} }\r\n { {@../index} }:{ {@index} }:{ {this} }

\r\n { {else} }\r\n

No content

\r\n { {/each} }\r\n{ {/each} }\r\n```\r\n\r\n```\r\n{ {#each array as |value, key|} }\r\n { {#each child as |childValue, childKey|} }\r\n { {key} } - { {childKey} }. { {childValue} }\r\n { {/each} }\r\n{ {/each} }\r\n```\r\n\r\n同时也可以用来遍历对象，这时@key表示属性名,this表示对应的值\r\n\r\n```\r\n{ {#each object} }\r\n { {@key} }: { {this} }\r\n{ {/each} }\r\n```\r\n\r\n#### with\r\n\r\n类似js中的with，可以配合分页使用，限定作用域。\r\n\r\n```\r\n{ {#with author as |myAuthor|} }\r\n

By { {myAuthor.firstName} } { {myAuthor.lastName} }

\r\n{ {else} }\r\n

No content

\r\n{ {/with} }\r\n```\r\n\r\n#### lookup\r\n\r\n这个用于以下这种并列数组的情况，可以按照索引来找兄弟变量对应的值。理解起来有些困难，直接看代码\r\n\r\n```\r\n{\r\n groups: [\r\n {id: 1, title: \"group1\"},\r\n {id: 2, title: \"group2\"},\r\n ],\r\n users: [\r\n {id:1, login: \"user1\", groupId: 1},\r\n {id:2, login: \"user2\", groupId: 2},\r\n {id:3, login: \"user3\", groupId: 1}\r\n ],\r\n infos: [\r\n 'a','b','c'\r\n ]\r\n}\r\n```\r\n\r\n\r\n```\r\n\r\n { {#each users} }\r\n \r\n \r\n \r\n \r\n { {/each} }\r\n

{ {login} }

{ {lookup ../infos @index} }

\r\n```\r\n\r\n```\r\nuser1 a\r\nuser2 b\r\nuser3 c\r\n```\r\n\r\n这里在users数组中按照索引值引用infos数组中对应的值，如果想引用groups中的groupId呢？很简单，用with。\r\n\r\n```\r\n\r\n { {#each users} }\r\n \r\n \r\n \r\n \r\n { {/each} }\r\n

{ {login} }

{ {#with (lookup ../groups @index)} }{ {title} }{ {/with} }

\r\n```\r\n\r\n### 自定义helper\r\n\r\n内置的helper不够强大，所以通常需要写js代码自定义helper，先看一个简单的单行helper。\r\n\r\n#### 行级helper\r\n\r\n##### 传值\r\n\r\n数值、字符串、布尔值这种常规数据可以直接传入，同时也可以传递JSON对象（但只能传一个），以key=value这种形式写在后面，最后就可以通过参数的hash属性来访问了。\r\n\r\n模板\r\n\r\n { {agree_button \"My Text\" class=\"my-class\" visible=true counter=4} }\r\n\r\n代码\r\n\r\n hbs.registerHelper('agree_button', function() {\r\n console.log(arguments[0]);//==>\"My Text\"\r\n console.log(arguments[1].hash);//==>{class:\"my-class\",visible:true,conter:4}\r\n }\r\n\r\n##### 传变量\r\n\r\n传变量时可以用this指针来指代它访问属性，通过逻辑判断后可以返回一段html代码，不过太建议这样做。考虑以后的维护性，这种html代码和js代码混合起来的维护性是比较差的，如果要抽象层组件还是使用分页比较好。\r\n\r\n模板：\r\n\r\n { {agree_button person} }\r\n\r\n注册helper：\r\n\r\n hbs.registerHelper('agree_button', function(p) {\r\n console.log(p===this);//==> true\r\n var blog = hbs.handlebars.escapeExpression(this.person.blog),\r\n name = hbs.handlebars.escapeExpression(this.person.name);\r\n \r\n return new hbs.handlebars.SafeString(\r\n \"\"+ name + \"\"\r\n );\r\n });\r\n\r\n数据：\r\n\r\n var context = {\r\n person:{name: \"亚里士朱德\", blog: \"https://yalishizhude.github.io\"} };\r\n };\r\n\r\nhtml页面：\r\n\r\n 亚里士朱德\r\n\r\n当内容只想做字符串解析的时候可以用 **escapeExpression** 和 **SafetString** 函数。\r\n\r\n#### 块级helper\r\n\r\n块级helper获取参数的方式跟之前差不多，只是最后多了一个参数，这个参数有两个函数`fn`和`revers`可以和`else`搭配使用。后面将会讲解。\r\n\r\n模板：\r\n\r\n```\r\n{ {#list nav} }\r\n { {title} }\r\n{ {/list} }\r\n```\r\n\r\n注册helper：\r\n\r\n```\r\nHandlebars.registerHelper('list', function(context, options) {\r\n var ret = \"

\" + options.fn(context[i]) + \"\";\r\n }\r\n\r\n return ret + \"

\";\r\n});\r\n```\r\n\r\n数据：\r\n\r\n```\r\n{\r\n nav: [\r\n { url: \"https://yalishihzude.github.io\", title: \"blog\" },\r\n { url: \"https://www.github.com/yalishizhude\", title: \"github\" },\r\n ]\r\n}\r\n```\r\n\r\nhtml页面：\r\n\r\n```\r\n

blog
github

\r\n```\r\n\r\n#### 自定义helper\r\n\r\neach的index变量比较常用，但是它是从0开始的，往往不符合业务中的需求，这里写个helper来扩展一下。\r\n\r\n注册helper：\r\n```\r\nhbs.registerHelper('eval', function(str, options){\r\n var reg = /\\{\\{.*?\\}\\}/g;\r\n var result = false;\r\n var variables = str.match(reg);\r\n var context = this;\r\n //如果是each\r\n if(options.data){\r\n context.first = context.first||options.data.first;\r\n context.last = context.last||options.data.last;\r\n context.index = context.index||options.data.index;\r\n context.key = context.key||options.data.key;\r\n }\r\n _.each(variables, function(v){\r\n var key = v.replace(/{ {|} }/g,\"\");\r\n var value = typeof context[key]===\"string\"?('\"'+context[key]+'\"'):context[key];\r\n str = str.replace(v, value);\r\n });\r\n try{\r\n result = eval(str);\r\n return new hbs.handlebars.SafeString(result);\r\n }catch(e){\r\n return new hbs.handlebars.SafeString('');\r\n console.log(str,'--Handlerbars Helper \"eval\" deal with wrong expression!');\r\n }\r\n });\r\n```\r\n\r\n模板：\r\n\r\n```\r\n{ {#each list} }\r\n{ {eval '{ {index} }+1'} }\r\n{ {/each} }\r\n```\r\n\r\n上面说到if不支持复杂的表达式，如果是“&&”操作还可以用子表达式来实现，更加复杂的就不好办了，这里我写了一个helper来实现。\r\n\r\n注册helper：\r\n```\r\nhbs.registerHelper('ex', function(str, options) {\r\n var reg = /\\{\\{.*?\\}\\}/g;\r\n var result = false;\r\n var variables = str.match(reg);\r\n var context = this;\r\n _.each(variables, function(v){\r\n var key = v.replace(/{ {|} }/g,\"\");\r\n var value = typeof context[key]===\"string\"?('\"'+context[key]+'\"'):context[key];\r\n str = str.replace(v, value);\r\n });\r\n try{\r\n result = eval(str);\r\n if (result) {\r\n return options.fn(this);\r\n } else {\r\n return options.inverse(this);\r\n }\r\n }catch(e){\r\n console.log(str,'--Handlerbars Helper \"ex\" deal with wrong expression!');\r\n return options.inverse(this);\r\n }\r\n });\r\n```\r\n\r\n模板：\r\n\r\n```\r\n{ {#ex \"{ {state} }==='submiting'\"} }\r\n\r\n{ {else} }\r\n\r\n{ {/ex} }\r\n```\r\n\r\n先将整个逻辑表达式作为一个字符串传入，然后替换其中的变量值，最后用eval函数来解析表达式，同时增加异常处理。\r\n\r\n## 高级玩家：partial\r\n\r\n比较推崇使用分页来实现组件化。分页跟helper一样需要先注册。在hbs模块中可以批量注册，比较简单。\r\n\r\n`hbs.registerPartials(__dirname + '/views/partials');`\r\n\r\n### 基础引用\r\n用“>”来引用模板，这种情况一般用来处理页头页尾这种简单的分页。后面可以传入参数。\r\n`{ {> myPartial param} }`\r\n\r\n当使用块级表达式时，我们通常添加“#”，而分页是“>”，所以块级分页使用“#>”，这里表示如果layout分页不存在则显示块内的内容My Content。\r\n```\r\n{ {#> layout } }\r\n My Content\r\n{ {/layout} }\r\n```\r\n\r\n### 动态分页\r\n\r\n当然也可以用表达式来代替分页名称\r\n\r\n`{ {> (whichPartial) } }`\r\n\r\n当分页中一部分代码是固定的，另一部分是变化的时候，可以在分页中添加“@partial-block”，这时当引用这个分页时，在内部编写代码将会填充到这个位置。\r\n\r\npartial.hbs：\r\n```\r\n亚里士朱德\r\n{ {> @partial-block } }\r\n```\r\n\r\n模板：\r\n```\r\n{ {#>partial} }\r\nhttps:yalishizhude.github.io\r\n{ {/partial} }\r\n```\r\n\r\nhtml页面：\r\n```\r\n亚里士朱德\r\nhttps:yalishizhude.github.io\r\n```\r\n\r\n### 内联分页\r\n\r\n当有多段代码需要填充到分页时,可以用如下方法。分页中内嵌分页变量，模板中通过内联分页的方式传入。\r\n\r\n模板：\r\n```\r\n{ {#> partial} }\r\n { {#*inline \"nav\"} }\r\n 亚里士朱德\r\n { {/inline} }\r\n { {#*inline \"content\"} }\r\n https://yalishizhude.github.io\r\n { {/inline} }\r\n{ {/partial} }\r\n```\r\n\r\npartial.hbs：\r\n```\r\n

\r\n { {> nav} }\r\n

\r\n

\r\n { {> content} }\r\n

\r\n```\r\n\r\nhtml页面：\r\n```\r\n

\r\n 亚里士朱德\r\n

\r\n

\r\n https://yalishizhude.github.io\r\n

\r\n```\r\n\r\n## 大师级玩家：API\r\n\r\n本文列举的只是handlebars中最重要和常用的功能，更多细碎的功能可以去查看\r\n[官方API](http://handlebarsjs.com/reference.html)。\r\n\r\n\r\n# 开头的问题\r\n\r\n>我想将导航条写成一个分页(partial)，导航条左边的文字标题是可以通过参数传递的，但是右边的内容可能是文字、图片其它元素，需要具体业务自定义实现。我又不想把html代码写在js中，所以希望在模板中将这段未知的模板代码填充到分页中进行展现。我在官网文档中找到了 \\{\\{>@partial-block\\}\\}来实现此功能，但是本机实验一直解析报错。\r\n解决过程：\r\n 这个问题原因可能有两个，一是官方文档有错，二是本机环境的插件有问题（Express用hbs模块，该模块封装了handlebars引擎模块）。为了验证官方文档的正确性，我找到了一个在线handlebars解析器，输入文档中的代码时可以正确解析，那么只可能出现在hbs模块了。这时在github上找到hbs模块最新版本为4，查看本地版本为3，更新后果然可以正常解析了。\r\n\r\n# 总结\r\n\r\nhandlebars让我们看到一个好的插件应该有的特征：\r\n* 可识别性。接口简单，使用方便，容易上手。\r\n* 高可用性。自带常用一些功能（helper），不求多而求精。\r\n* 可扩展性。复杂的业务逻辑，开发人员可以自定义helper去扩展和实现。\r\n\r\n- - -\r\n>作者：亚里士朱德\r\n>博客：http://yalishizhude.github.io","title","handlebars玩家指南","last_reply_at","2017-09-13 23:42:12.091","good",true,"top",8,"visit_count",33190,"2016-01-23 02:42:57.74","author",{"_13":55,"_22":56},"yalishizhude","https://avatars2.githubusercontent.com/u/3870098?v=4"]