[英]Handlebars if statement condition show content based on membershipID
有关数据库的快速详细信息
我有引用成员资格表的用户表。
这是一些示例数据
userID username membershipID
1 test 1 -- Admin
2 test2 2 -- Standard
当前车把
我已经设置了车把页面
{{#if user}}
<li class="nav-item">
<a class="nav-link" href="/admin">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
{{else}}
<li class="nav-item">
<a class="nav-link" href="/admin">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
{{/if}}
上述代码的详细信息
当用户登录时,它会显示相关的导航项目。
问题
我可以在用户的成员 ID 的句柄栏中获得 output,例如:
{{user.membershipID}}
会给我一个 1 或 2 的 output。然后如何在车把中创建一个 if 语句来确定要显示的内容?
还是有替代方法? 如果需要,我可以向您展示我的所有代码吗?
任何帮助表示赞赏!
编辑 1
我正在尝试测试车把寄存器:
项目/helpers/handlebars-helper.js
module.exports = {
membership: ("ifEqual", function(variable1,variable2,options){
if (variable1 === variable2) {
return options.fn(this);
} else {
return options.inverse(this);
}
})
}
项目/app.js
const handlebars = require('express-handlebars');
// Public directory static file
app.use(express.static(path.join(__dirname, '/public')));
// View engine
const {membership} = require('./helpers/handlebars-helpers');
app.engine('handlebars', handlebars({defaultLayout: 'home', helpers: {membership: membership}}));
app.set('view engine', 'handlebars');
项目/视图/partials/home/home-nav.handlebars
{{#membership}}
{{#ifEqual 1 1}}
<h1>Test</h1>
{{/ifEqual}}
{{/membership}}
详细信息和 output
在这里,我看到 1 是否等于 1,如果是,则显示h1
output。 但我得到这个错误:
TypeError: Cannot read property 'inverse' of undefined
编辑2:
这是我现在的位置
项目/helpers/handlebars-helpers.js
const handlebars = require('express-handlebars');
module.exports = {
membership: handlebars.create('ifEquals', function(arg1, arg2, options) {
return (arg1 == arg2) ? options.fn(this) : options.inverse(this);
})
}
项目/视图/partials/home/home-nav.handleabrs
{{#membership}}
{{#ifEqual 2 2}}
<h1>Test</h1>
{{/ifEqual}}
{{/membership}}
Output 上 HTML
[object Object]
终于想通了!
项目/app.js
// View engine
const {membership} = require('./helpers/handlebars-helpers');
app.engine('handlebars', handlebars({defaultLayout: 'home', helpers: {membership: membership}}));
app.set('view engine', 'handlebars');
项目/helpers/handlebars-helper.js
module.exports = {
membership: function(var1, var2, options){
if(var1 === var2) {
return options.fn(this);
}
return options.inverse(this);
}
}
最后在.handlebars中:
{{#membership 1 5}}
<p>True</p>
{{/membership}}
您可以定义自定义辅助函数来检查 2 个变量是否相等并采取相应措施。 以下是如何定义自定义助手:
const hbs = require("hbs");
hbs.registerHelper("ifEqual", function (variable1,variable2,options){
if (variable1 === variable2) {
return options.fn(this);
}
return options.inverse(this);
});
以下是您从 hbs 视图中调用它的方式:
{{#ifEqual variable1 variable2}}
//code
{{else}}
//code
{{/ifEqual}}
举例说明:
最少的后端代码:
const express = require("express");
const app = express();
const hbs = require("hbs");
app.set('view engine', 'hbs');
app.listen(3000)
hbs.registerHelper("ifEqual", function (variable1,variable2,options){
if (variable1 === variable2) {
return options.fn(this);
}
return options.inverse(this);
});
app.get("/", (req, res) => {
return res.render("test.hbs", {user:{id:1}})
});
最少的前端代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
{{#ifEqual user.id 2}}
<p>"User Id: "{{user.id}} "is equal to 2"</p>
{{else}}
<p>"User Id: "{{user.id}} "is not equal to 2"</p>
{{/ifEqual}}
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.