在 Handlebars 的 Helpers 中，options.fn(this) 和 options.inverse(this) 是用于处理块级 Helper 的重要部分进行解释

最新推荐文章于 2025-12-23 22:12:29 发布

原创最新推荐文章于 2025-12-23 22:12:29 发布 · 628 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端

nodejs 专栏收录该内容

22 篇文章

订阅专栏

options 对象
options 是 Handlebars 在调用 Helper 时传递的一个对象，它包含了与当前模板渲染相关的上下文信息和方法。options 对象的主要属性和方法如下：
1.1 options.fn
含义：fn 是一个函数，表示当前块级 Helper 的模板内容部分。
用途：当你在模板中使用块级 Helper（例如 {{#helperName}}…{{/helperName}}）时，fn 会渲染块级 Helper 内部的模板内容。
参数：fn 接受一个上下文对象（通常是 this），并根据这个上下文渲染模板内容。

1.2 options.inverse
含义：inverse 是一个函数，表示块级 Helper 的 else 部分。
用途：当你在模板中使用块级 Helper 的 else 部分（例如 {{#helperName}}…{{else}}…{{/helperName}}）时，inverse 会渲染 else 部分的模板内容。
参数：inverse 同样接受一个上下文对象（通常是 this），并根据这个上下文渲染 else 部分的模板内容。

1.3 options.hash
含义：hash 是一个对象，包含了块级 Helper 的命名参数。
用途：当你在模板中为 Helper 传递命名参数时（例如 {{#helperName param1=value1 param2=value2}}…{{/helperName}}），这些参数会被存储在 hash 对象中。

在helper的函数中

isEqual: function(value1, value2, options) {
//这里要使isEqual获取到模板中param1和param2中的值，必须在下面的模板中给param1/param2赋上值，这里options.hash才能拿到值，不然是空{}
  console.log(options.hash); // { param1: 'value1', param2: 'value2' }
  if (value1 === value2) {
    return options.fn(this);
  } else {
    return options.inverse(this);
  }
}

//这是在模板中,必须给param1/param2赋值，函数options.hash才能拿到值
//如果不需要options.hash拿值，那么可以去掉prarm1/param2
//如：{{#isEqual user.role ‘admin’}}上面的value1/value2会自动比较user.role/admin是否相等

{{#isEqual user.role 'admin' param1=user.role param2="admin"}}
  <p>Welcome, Admin!</p>
{{else}}
  <p>Welcome, User!</p>
{{/isEqual}}

举个简单的示例

const express = require('express');
const exphbs = require('express-handlebars');

const app = express();

// 注册全局 Helpers
app.engine('handlebars', exphbs({
  defaultLayout: 'main',
  helpers: {
    // 自定义块级 Helper：判断是否相等
    isEqual: function(value1, value2, options) {
      if (value1 === value2) {
        return options.fn(this); // 如果相等，渲染模板内容
      } else {
        return options.inverse(this); // 如果不相等，渲染 else 部分
      }
    }
  }
}));

app.set('view engine', 'handlebars');

// 示例路由
app.get('/', (req, res) => {
  res.render('index', {
    user: { role: 'admin' }
  });
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

示例模板文件（views/index.hbs）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Handlebars Helpers</title>
</head>
<body>
  {{#isEqual user.role 'admin'}}
    <p>Welcome, Admin!</p>
  {{else}}
    <p>Welcome, User!</p>
  {{/isEqual}}
</body>
</html>