Handlebars.js 否则如果答案

【问题标题】：Handlebars.js Else IfHandlebars.js 否则如果
【发布时间】：2012-05-31 00:03:54
【问题描述】：

我正在使用 Handlebars.js 进行客户端视图渲染。如果 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？

【问题讨论】：

关注车把更新，看来马上就要实施了：github.com/wycats/handlebars.js/pull/892

标签： handlebars.js

【解决方案1】：

自 3.0.0 起，Handlebars 支持 {{else if}} 块。

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

【讨论】：

是在车把中没有 elsif（或 else if）的关键，您将太多逻辑放入模板中。换句话说，你需要把它分解成更小的模板吗？
@KazimZaidi，如果您有一个具有三个以上状态的数据，并且在每种情况下都需要不同的格式，该怎么办？您可能能够将 CSS 样式强制到数据本身，但随后您将视图级别的关注点推送到您的数据中。我可以想象 if/elseif/endif 构造（甚至是 switch/match）的合理案例。
再看这个，感觉可以通过属性绑定来实现。
我认为首选的方法是传递布尔标志并对其进行条件化。您可以正确设置标志，以便只有一个条件评估为真。不需要else if
我建议您使用辅助函数来将您的业务逻辑与表示分离。

【解决方案2】：

我通常使用这种形式：

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

【讨论】：

好提示，谢谢。默认情况下这会是响应式的吗？
只有 1 个 else if 看起来很漂亮，但是你拥有的越多，最后一个关闭 if 的列表就越长 - {{/if}}{{/if}}{{/if}}{{/if}}{{/if}}
不，它不是“更干净”，而是更丑。

【解决方案3】：

自 3.0.0 起，Handlebars 现在支持 {{else if}}。因此，您的代码现在应该可以工作了。

您可以在“条件”下看到一个示例（此处稍作修改，添加了{{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

【讨论】：

这应该是新的答案！
对我不起作用（模板中的语法错误）。流星 1.2.0.2
@dragonmnl Meteor 1.2.0.2 使用哪个版本的把手？确保您使用的是 3.0。
我使用的是默认版本。如何查看车把版本？
@dragonmnl 看起来 Meteor 使用了自己的模板语言 Spacebars。如果是这种情况，那么我不确定它是否支持{{else if}} 语法。

【解决方案4】：

车把的精神是“无逻辑”。有时这让我们觉得我们正在与之抗争，有时我们最终会遇到丑陋的嵌套 if/else 逻辑。你可以写一个助手；许多人使用“更好”的条件运算符或believe that it should be part of the core 来增加车把。不过，我认为，而不是这个，

{{#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，那么您可能也在其他地方使用它，因此这些变量最终可能不会是多余的。

保持精简。

【讨论】：

我不确定这种做法有多好，但是今天我遇到了处理 3 种不同视图状态的问题，我最终使用了基于此的解决方案（他们的 elseif 逻辑不是必要的，因为他们都在检查一个值）stackoverflow.com/questions/15008564/… 所以，除了#if _is_friend，您可以使用带有非常简单帮助器的字符串（在他们的答案中）； #if friend_type "is_friend" 和 #if friend_type "is_not_friend_yet"
这个答案是我认为最好的前把手 3.0 解决方案，我认为额外的 HTML 比试图将逻辑塞进 DOM 树更好。

【解决方案5】：

我写了这个简单的助手：

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

这有点像 Handlebars 中的 Chain Of Responsibility 模式

例子：

    {{#conditions}}
        {{#next condition1}}
            Hello 1!!!
        {{/next}}
        {{#next condition2}}
            Hello 2!!!
        {{/next}}
        {{#next condition3}}
            Hello 3!!!
        {{/next}}
        {{#next condition4}}
            Hello 4!!!
        {{/next}}
    {{/conditions}}

这不是 else if，但在某些情况下它可能会对您有所帮助）

【讨论】：

【解决方案6】：

内置助手

#if

您可以使用 if 助手有条件地渲染一个块。如果其参数返回 false、undefined、null、""、0 或 []，Handlebars 将不会渲染该块。

模板

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

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

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

【讨论】：

【解决方案7】：

你好，我只有一个 MINOR 类名编辑，到目前为止，这就是 iv 泄露它的方式。我想我需要将多个参数传递给助手，

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>

【讨论】：

【解决方案8】：

在车把中首先注册如下函数

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

【讨论】：