[英]Handlebars if statement condition show content based on membershipID
Quick details about database有关数据库的快速详细信息
I have users table which is referenced to membership table.我有引用成员资格表的用户表。
Here is some sample data这是一些示例数据
userID username membershipID
1 test 1 -- Admin
2 test2 2 -- Standard
Current Handlebars当前车把
I have a handlebars page set up already我已经设置了车把页面
{{#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}}
Details of above code上述代码的详细信息
When user is logged in it shows relevant nav items.当用户登录时,它会显示相关的导航项目。
Question问题
I am able to get an output in handle bars of the membershipID of a user, for example:我可以在用户的成员 ID 的句柄栏中获得 output,例如:
{{user.membershipID}}
will give me an output of 1 or 2. How can I then create an if statement in handlebars to determine what content to show?会给我一个 1 或 2 的 output。然后如何在车把中创建一个 if 语句来确定要显示的内容?
Or is there an alternative method?还是有替代方法? I can show you all my code if needed?
如果需要,我可以向您展示我的所有代码吗?
Any help is appreciated!任何帮助表示赞赏!
Edit 1编辑 1
I am trying to test out the handlebars register:我正在尝试测试车把寄存器:
Project/helpers/handlebars-helper.js项目/helpers/handlebars-helper.js
module.exports = {
membership: ("ifEqual", function(variable1,variable2,options){
if (variable1 === variable2) {
return options.fn(this);
} else {
return options.inverse(this);
}
})
}
project/app.js项目/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');
project/views/partials/home/home-nav.handlebars项目/视图/partials/home/home-nav.handlebars
{{#membership}}
{{#ifEqual 1 1}}
<h1>Test</h1>
{{/ifEqual}}
{{/membership}}
Details and output详细信息和 output
Here I am seeing if 1 is equals to 1 and if it is then, show h1
output.在这里,我看到 1 是否等于 1,如果是,则显示
h1
output。 But I get this error:但我得到这个错误:
TypeError: Cannot read property 'inverse' of undefined
Edit 2:编辑2:
Here is where I am at now这是我现在的位置
project/helpers/handlebars-helpers.js项目/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);
})
}
project/views/partials/home/home-nav.handleabrs项目/视图/partials/home/home-nav.handleabrs
{{#membership}}
{{#ifEqual 2 2}}
<h1>Test</h1>
{{/ifEqual}}
{{/membership}}
Output on HTML Output 上 HTML
[object Object]
Finally figured it out!终于想通了!
project/app.js项目/app.js
// View engine
const {membership} = require('./helpers/handlebars-helpers');
app.engine('handlebars', handlebars({defaultLayout: 'home', helpers: {membership: membership}}));
app.set('view engine', 'handlebars');
project/helpers/handlebars-helper.js项目/helpers/handlebars-helper.js
module.exports = {
membership: function(var1, var2, options){
if(var1 === var2) {
return options.fn(this);
}
return options.inverse(this);
}
}
and finally in the.handlebars:最后在.handlebars中:
{{#membership 1 5}}
<p>True</p>
{{/membership}}
You can define custom helper functions to check for equality of 2 variables and act accordingly.您可以定义自定义辅助函数来检查 2 个变量是否相等并采取相应措施。 Below is how to define a custom helper:
以下是如何定义自定义助手:
const hbs = require("hbs");
hbs.registerHelper("ifEqual", function (variable1,variable2,options){
if (variable1 === variable2) {
return options.fn(this);
}
return options.inverse(this);
});
Below is how you call it from your hbs view:以下是您从 hbs 视图中调用它的方式:
{{#ifEqual variable1 variable2}}
//code
{{else}}
//code
{{/ifEqual}}
Elaborating with an example:举例说明:
Minimal back end code:最少的后端代码:
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}})
});
Minimal frontend code:最少的前端代码:
<!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.