如果没有Handlebars.js

241

我正在使用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？

handlebars.js 
— 到达4激光
source
密切关注车把的更新，似乎它将很快实现：github.com/wycats/handlebars.js/pull/892
— Jacob van Lingen

Answers:

376

{{else if}}从3.0.0开始，把手支持块。

把手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}}
— 卡尔
source
6
这是在车把中没有elsif（或if）的问题，这说明您在模板中添加了过多的逻辑。换句话说，您需要将其分解为较小的模板吗？
— 卡齐姆·扎伊迪
1
@KazimZaidi，如果您的单个数据具有三个以上的状态，并且每种情况下都需要不同的格式，该怎么办？您也许可以将CSS样式强加到数据本身中，但是随后您将视图级别的关注点推入了数据中。我可以想象出if / elseif / endif构造（甚至是switch / match）的明智案例。
— 德鲁·诺阿克斯
1
再看一遍，我觉得这可以通过属性绑定来完成。
— 卡齐姆·扎伊迪
1
我认为首选方法是传递布尔标志并对其进行条件化。您可以自行设置正确的标志，以使只有一个条件的评估结果为true。不需要else if
— 弯曲的
我建议您使用辅助功能来做到这一点，以将业务逻辑与表示分离。
— Max Hodges
76

我通常使用这种形式：

{{#if FriendStatus.IsFriend}}
  ...
{{else}} {{#if FriendStatus.FriendRequested}}
  ...
{{else}}
  ...
{{/if}}{{/if}}
— drinor
source
很好的提示，谢谢。默认情况下这会是被动的吗？
— kylemclaren 2014年
2
如果看起来只有1个，则看起来很漂亮，但是如果拥有的更多，则最后一个关闭列表的时间越长{{/if}}{{/if}}{{/if}}{{/if}}{{/if}}
— jbyrd
1
不，不是更“干净”，而是更丑陋。
— 基因b。
37

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

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

车把的精神是“无逻辑”。有时，这使我们感到自己在与之抗争，而有时，我们最终遇到了难看的嵌套if / else逻辑。你可以写一个助手。许多人使用“更好”的条件运算符来增强车把，或者认为它应该是核心的一部分。我想，尽管如此，

{{#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在视图中使用此功能，则可能还会在其他地方使用它，因此这些变量可能最终不会成为多余的。

保持苗条。

— 齐吉
source
1
我不确定这种做法有多好，但是今天这对我来说是处理3种不同的视图状态，最终我使用了基于此的解决方案（如果不需要逻辑，则无需其他逻辑，因为它们都在检查一个值）stackoverflow.com/questions/15008564/…因此，除了#if _is_friend之外，您还可以使用带有非常简单的帮助器的字符串（在其答案中）；#if friend_type“ is_friend”和#iffriend_type“ is_not_friend_yet”
— Dylan Reich
这个答案是我认为是3.0之前最好的解决方案，我认为额外的HTML比尝试将逻辑塞入DOM树更好。
— David O'Regan
7

我写了这个简单的助手：

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

如果不是这样的话，但在某些情况下可能会帮助您）

— 基里尔·埃莫洛夫（Kirill Ermolov）
source
1

内置助手

#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"
}
— 阿卜杜主机
source
0

您好，我只有一个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>
— 疯鸟
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.