用于 else if 的车把 js 自定义助手答案

【问题标题】：handlebar js custom helper for else if用于 else if 的车把 js 自定义助手
【发布时间】：2012-10-31 17:31:51
【问题描述】：

我已经开始使用 Handlebars.js。似乎没有像 else if 这样的内置条件。我想要这样的东西

{{#if type.one }}
     do something ... IF
{{else if type.two}}
     do something ... ELSE IF
{{else}}
     do something ... ELSE
{{/if}}

但这不起作用。我如何用车把做 ELSE IF？编写自定义助手是唯一的选择吗？如果是，请提供一些指导来编写此帮助程序。

【问题讨论】：

标签： handlebars.js

【解决方案1】：

您不能使用自定义助手执行此操作，因为 Handlebars if-ish 助手只了解两个部分：“if”部分和“else”部分。不过你可以嵌套一些东西：

{{#if type.one}}
    do something ... IF
{{else}}
    {{#if type.two}}
        do something ... ELSE IF
    {{else}}
        {{#if type.three}}
            ...
        {{else}}
            ...
        {{/if}}
    {{/if}}
{{/if}}

这种事情会很快变得令人讨厌，所以你可能不想这样做。一种更好的方法（与 Handlebars 一样）是将逻辑推送到您的 JavaScript 中，以便 type.one、type.two、type.three、... 中的最多一个为真；那么你可以：

{{#if type.one}}
    ...
{{/if}}
{{#if type.two}}
    ...
{{/if}}
{{#if type.three}}
    ...
{{/if}}

如果您有很多 type 的选项，或者如果您的 {{#if}}s 中的正文很复杂，您可以切换到部分。但是，您必须添加一个自定义帮助程序才能基于模板变量构建部分名称；像这样：

Handlebars.registerHelper('show_type', function(type) {
    var types = ['one', 'two', 'three'];
    var partial;
    for(var i = 0; i < types.length; ++i) {
        if(!type[types[i]])
            continue;
        partial = '_partial_' + types[i];
        break;
    }
    if(partial)
        return Handlebars.partials[name](this);
    else
        return '';
});

然后，假设您的部分都已注册并一致命名，您可以说：

{{show_type type}}

【讨论】：

【解决方案2】：

从 Handlebars 3.0 开始，OP 描述的语法确实可以开箱即用！请参阅：https://github.com/wycats/handlebars.js/pull/892 了解更多信息。

注意：对于 Ember，从 1.10 及更高版本开始，这也可以正常工作。也可以看看： http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html#toc_chained-else-blocks

【讨论】：

【解决方案3】：

如果您使用的是类似 ember 的框架，

{{#if isAtWork}}
     Ship that code!
{{else if isReading}}
      You can finish War and Peace eventually...
{{/if}}

链接：http://guides.emberjs.com/v1.12.0/templates/conditionals/

【讨论】：

【解决方案4】：

你可以这样做：

{{#if type.one}}
  ...
{{else}} {{#if type.two}}
  ...
{{else}} {{#if type.three}}
  ...
{{else}}
  ...
{{/if}}{{/if}}{{/if}}

【讨论】：

【解决方案5】：

如果您想要切换行为，您可能对Dan Harper's helpers 感兴趣，您可以执行以下操作：

{{#is type 1}}
    <p>Do something when 1.</p>
{{else}}{{#is type 2}}
    <p>Do something when 2.</p>
{{else}}{{#is type 3}}
    <p>Do something when 3.</p>
{{/is}}{{/is}}{{/is}}

这里是jsfiddle。

【讨论】：

【解决方案6】：

OP 编写的确切语法将在今天的 Ember Canary 中使用 ember-htmlbars-inline-if-helper 功能标志已启用。

【讨论】：