如何使用条件语句在 Handlebars 中显示/隐藏 html 元素答案

【问题标题】：How to show / hide html elements in Handlebars using conditional statement如何使用条件语句在 Handlebars 中显示/隐藏 html 元素
【发布时间】：2015-05-20 14:43:30
【问题描述】：

我的车把标签中有以下内容：

{{#editmode mode}}

    <div class="form-group login-input">
       <i class="fa fa-key overlay"></i>
       <input type="password" class="form-control text-input" name="password" placeholder="Password" value="{{password}}">
    </div>

    <div class="form-group login-input">
       <i class="fa fa-key overlay"></i>
       <input type="password" class="form-control text-input" name="password_confirmation" value="{{password}}">
     </div>

{{/editmode}}

并且我已将以下内容注册为我的辅助函数：

Handlebars.registerHelper('editmode', function(mode){           
    return mode == 'edit' ? true : false;
});

传递给车把模板的对象如下所示：

{
   firstname: 'Test',
   lastname: 'Test lastname',
   mode: 'new
}

所以基本上，每当“模式”变量为“新”时，我想显示密码字段，否则隐藏它们，但现在它们总是隐藏的。有什么想法吗？

【问题讨论】：

标签： javascript jquery templates handlebars.js

【解决方案1】：

我想通了。这成功了：

Handlebars.registerHelper('editmode', function(mode, options){                      
     return mode == 'edit' ? '' : options.fn();
});

【讨论】：

【解决方案2】：

您可以使用if 声明。

<div class="form-group login-input">
   <i class="fa fa-key overlay"></i>
   <input type="password" class="form-control text-input" name="password" placeholder="Password" value="{{password}}">
</div>

{{#if mode}}
<div class="form-group login-input">
   <i class="fa fa-key overlay"></i>
   <input type="password" class="form-control text-input" name="password_confirmation" value="{{password}}">
 </div>
{{/if}}

【讨论】：

这很好用，非常感谢。在我看来，这应该是首选答案，因为 mailgun 和 savegrid 等一些提供商不给我们注册新 Handlebar 助手的选项！