js 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}}

小开

我通常使用这种形式:

\{\{#if FriendStatus.IsFriend}}
...
\{\{else}} \{\{#if FriendStatus.FriendRequested}}
...
\{\{else}}
...
\{\{/if}}\{\{/if}}

小开

把手的精神是“无逻辑”。有时这让我们觉得我们在与它斗争，有时我们最终得到了丑陋的嵌套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，你可能在其他地方也在使用它，所以这些变量可能不是多余的。

保持苗条。

小开

把手现在支持\{\{else if}}作为3.0.0。因此，你的代码现在应该工作了

你可以在“条件”下看到一个例子(在这里略有修改，增加了\{\{else}}:

    \{\{#if isActive}}
<img src="star.gif" alt="Active">
\{\{else if isInactive}}
<img src="cry.gif" alt="Inactive">
\{\{else}}
<img src="default.gif" alt="default">
\{\{/if}}

http://handlebarsjs.com/block_helpers.html < a href = " http://handlebarsjs.com/block_helpers.html " > < / >

小开

我写了这个简单的帮助程序:

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}}

它不是其他的如果，但在某些情况下它可能会帮助你)

小开

内置的助手

#if

你可以使用if helper来有条件地呈现一个块。如果它的参数返回false, undefined, null， ""， 0，或[]，句柄将不会呈现块。

模板

<div class="entry">
\{\{#if author}}
<h1>\{\{firstName}} \{\{lastName}}</h1>
\{\{else}}
<h1>Unknown Author</h1>
\{\{/if}}
</div>

当您将以下输入传递给上述模板时

{
author: true,
firstName: "Yehuda",
lastName: "Katz"
}

小开

你好，我只有一个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>

小开

在车把中，首先注册如下所示的函数

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}}