1, 行内 Helper: 最终只输出对应数据类型的 Helper
- /*
- 公共的 Helper 自然是写在公共模块下的 App.JS 文件中, 以 hbs 文件为例
- 先得导入 hbs 库, 也就是 handlebars
- */
- const hbs = require('hbs');// 导入 hbs 库, 扩展 handlebars
- // 注册一个方法名称为 checkEven 的 Helper, 核实传过来的数据是否为偶数
- hbs.registerHelper("checkEven",(num)=> {
- // 去除取余数是否为 0, 偶数则为 0, 奇数则不为 0
- if (num%2 ==0){
- return true;
- } else{
- return false;
- }
- });
- // 对应模板引擎的调用 @index 为传入到该 checkEven 的 helper 方法的参数
- {{checkEven @index}}
- // 也可以这样配置 #if 方法的使用
- {{#if (checkEven @index)}}
- {{/if}}
2, 块级的 Helper: 最终输出的是 html/JS/CSS 的 helper;
对应的应用场景以项目中 jQuery 的引用为例, 在正常情况下, 按照之前的写法, 我们直接在 layout 的公共界面上进行引用之后, 在其他的界面可以直接进行应用. 如下写法, 在 layout 进行 jQuery 文件的引用, 在其它界面可以直接调用 jQuery 的类库进行 JS 的编写:
当这样写完之后, 会发现, 页面出现了如下错误, 在查看具体的错误时, 会发现引用的 jQuery 文件跑到下面来了导致了加载的顺序倒了, 所以没有识别到 jQuery.
按照此错误的第一处理办法, 直接在 index 页面的 < script > 块的上面进行 jQuery 的再次引用, 会发现该错误不存在了, 但是会发现我们同时引入了两次 jQuery 文件
应对于此类场景, 需要做如下的一个处理, 引用块级的 helper, 直接将 index 页面的 JS 文件搬到 layout 页面下的 jQuery 引用的代码块下面 (即将 JS 块挪到指定的作用域下进行使用). 因此需要如下这样两个 helper 方法
- // 注册扩展代码块 helper
- const blocks = {};// 代码块缓存对象
- hbs.registerHelper('extend', function (name, context) {
- // context 是上下文, 保存有用方法和数据, 最后一个参数永远是 context
- let block = blocks[name]; // block 用来存放代码块
- if (!block) {
- block = blocks[name] = [];
- }
- // 变异指令中代码块并放入 block
- block.push(context.fn(this));
- // 与 context.fn() 配对还有一个方法
- // context.inverse()
- })
- // 该方法是将块级的 JS,HTML,CSS 等放在指定的位置
- hbs.registerHelper('block', function (name) {
- const val = (blocks[name] || []).join('\n')
- blocks[name] = [];// 清空缓存
- return val;
- })
定义好上面的两个方法之后, 在调用的时候, 具体如下:
- //index 界面上写的 < script > 标签需要包在 {{#extend}} 的 helper 中
- {{#extend 'jquery'}}
- <script type="text/javascript">
- $(function () {
- $(".remark").click(function(){
- alert("1111");
- });
- })
- </script>
- {{/extend}}
- //layout 界面上的则需要进行指定这段 JS 块代码的具体位置
- <script src="/javascripts/jquery.js"></script>
- {{{block 'jquery'}}}// 指定 JS 块
更改完毕之后运行, 即达到了我们想要的效果, 对于 CSS,HTML 的块移动同理
3, 引用 N 多的第三方帮助方法库 https://github.com/helpers/handlebars-helpers
在引用的时候, 需要注意的, 因为是属于第三方的帮助方法库, 所以在自己的项目中引用需要做一步转换, 之后就可以直接使用了
- const helpers = require('handlebars-helpers');//helpers 库
- helpers.comparison({
- handlebars: hbs.handlebars
- });
来源: http://www.bubuko.com/infodetail-2846805.html