Handlebars.js否则如果

我使用Handlebars.js进行客户端视图渲染。 如果Else的工作很好，但我遇到了一个3方面的条件，需要ELSE 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}} 

如何使用车把呢？

Answer 1

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

Answer 2

我通常使用这种forms：

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

Answer 3

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

保持精益。

Answer 4

现在把手支持从3.0.0开始的{{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

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

这是像把手中的 责任链模式

例：

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

这不是别的，但在某些情况下，它可能会帮助你）