我使用Handlebars.js进行客户端视图渲染。If Else工作得很好，但我遇到了一个需要Else If的3路条件:
这行不通:
{{#if FriendStatus.IsFriend }}
<div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else if FriendStatus.FriendRequested}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}
我如何做ELSE IF与把手?
Handlebars支持3.0.0版本的{{else if}}块。
车把v3.0.0或更高版本:
{{#if FriendStatus.IsFriend}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else if FriendStatus.FriendRequested}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}
然而，在Handlebars v3.0.0之前，你必须定义一个帮手来手动处理分支逻辑或嵌套if语句:
{{#if FriendStatus.IsFriend}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else}}
{{#if FriendStatus.FriendRequested}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}
{{/if}}
我写了这个简单的帮助程序:
Handlebars.registerHelper('conditions', function (options) {
var data = this;
data.__check_conditions = true;
return options.fn(this);
});
Handlebars.registerHelper('next', function(conditional, options) {
if(conditional && this.__check_conditions) {
this.__check_conditions = false;
return options.fn(this);
} else {
return options.inverse(this);
}
});
这有点像把手中的责任链模式
例子:
{{#conditions}}
{{#next condition1}}
Hello 1!!!
{{/next}}
{{#next condition2}}
Hello 2!!!
{{/next}}
{{#next condition3}}
Hello 3!!!
{{/next}}
{{#next condition4}}
Hello 4!!!
{{/next}}
{{/conditions}}
这不是另一个如果，但在某些情况下，它可能会帮助你)
在车把中，首先注册如下所示的函数
Handlebars.registerHelper('ifEquals', function(arg1, arg2, options) {
return (arg1 == arg2) ? options.fn(this) : options.inverse(this);
});
你可以注册多个函数。要添加另一个函数，只需添加如下所示
Handlebars.registerHelper('calculate', function(operand1, operator, operand2) {
let result;
switch (operator) {
case '+':
result = operand1 + operand2;
break;
case '-':
result = operand1 - operand2;
break;
case '*':
result = operand1 * operand2;
break;
case '/':
result = operand1 / operand2;
break;
}
return Number(result);
});
而在HTML页面中只包括这样的条件
{{#ifEquals day "mon"}}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
//html code goes here
</html>
{{else ifEquals day "sun"}}
<html>
//html code goes here
</html>
{{else}}
//html code goes here
{{/ifEquals}}
你好，我只有一个MINOR类名编辑，到目前为止，这是如何iv泄露它。我认为我需要将多堆参数传递给helper，
server.js
app.engine('handlebars', ViewEngine({
"helpers":{
isActive: (val, options)=>{
if (val === 3 || val === 0){
return options.fn(this)
}
}
}
}));
header.handlebars
<ul class="navlist">
<li class="navitem navlink {{#isActive 0}}active{{/isActive}}"
><a href="#">Home</a></li>
<li class="navitem navlink {{#isActive 1}}active{{/isActive}}"
><a href="#">Trending</a></li>
<li class="navitem navlink {{#isActive 2}}active{{/isActive}}"
><a href="#">People</a></li>
<li class="navitem navlink {{#isActive 3}}active{{/isActive}}"
><a href="#">Mystery</a></li>
<li class="navitem navbar-search">
<input type="text" id="navbar-search-input" placeholder="Search...">
<button type="button" id="navbar-search-button"><i class="fas fa-search"></i></button>
</li>
</ul>
把手的精神是“无逻辑”。有时这让我们觉得我们在与它斗争，有时我们最终得到了丑陋的嵌套if/else逻辑。你可以编写一个helper;许多人用“更好的”条件操作符来增强句柄，或者认为它应该是核心的一部分。但我觉得，与其这样，
{{#if FriendStatus.IsFriend}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else}}
{{#if FriendStatus.FriendRequested}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
<div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}
{{/if}}
你可能想要在你的模型中安排一些东西，这样你就可以，
{{#if is_friend }}
<div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{/if}}
{{#if is_not_friend_yet }}
<div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{/if}}
{{#if will_never_be_my_friend }}
<div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}
只要确保这些标志中只有一个是真的。很有可能，如果您在视图中使用这个if/elsif/else，那么您可能在其他地方也在使用它，因此这些变量可能不是多余的。
保持苗条。
