Handlebars if 语句条件显示基于 membershipID 的内容
Handlebars if statement condition show content based on membershipID
有关数据库的快速详细信息
我有用户 table 引用了成员资格 table。
这是一些示例数据
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}}
以上代码详情
当用户登录时,它会显示相关的导航项。
问题
我能够在用户的 membershipID 的句柄栏中获得输出,例如:
{{user.membershipID}}
将给我输出 1 或 2。然后如何在车把中创建 if 语句以确定要显示的内容?
或者有其他方法吗?如果需要,我可以向您展示我的所有代码吗?
感谢任何帮助!
编辑 1
我正在尝试测试车把寄存器:
Project/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
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.车把
{{#membership}}
{{#ifEqual 1 1}}
<h1>Test</h1>
{{/ifEqual}}
{{/membership}}
详情和输出
我在这里查看 1 是否等于 1,如果等于 1,则显示 h1
输出。但是我得到这个错误:
TypeError: Cannot read property 'inverse' of undefined
编辑 2:
这是我现在所在的位置
project/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
{{#membership}}
{{#ifEqual 2 2}}
<h1>Test</h1>
{{/ifEqual}}
{{/membership}}
输出 HTML
[object Object]
您可以定义自定义辅助函数来检查 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>
终于想通了!
project/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
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}}
有关数据库的快速详细信息
我有用户 table 引用了成员资格 table。
这是一些示例数据
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}}
以上代码详情
当用户登录时,它会显示相关的导航项。
问题
我能够在用户的 membershipID 的句柄栏中获得输出,例如:
{{user.membershipID}}
将给我输出 1 或 2。然后如何在车把中创建 if 语句以确定要显示的内容?
或者有其他方法吗?如果需要,我可以向您展示我的所有代码吗?
感谢任何帮助!
编辑 1
我正在尝试测试车把寄存器:
Project/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
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.车把
{{#membership}}
{{#ifEqual 1 1}}
<h1>Test</h1>
{{/ifEqual}}
{{/membership}}
详情和输出
我在这里查看 1 是否等于 1,如果等于 1,则显示 h1
输出。但是我得到这个错误:
TypeError: Cannot read property 'inverse' of undefined
编辑 2:
这是我现在所在的位置
project/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
{{#membership}}
{{#ifEqual 2 2}}
<h1>Test</h1>
{{/ifEqual}}
{{/membership}}
输出 HTML
[object Object]
您可以定义自定义辅助函数来检查 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>
终于想通了!
project/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
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}}