Handlebars.js: {{#switch}} 助手

这是可以使用标准帮助程序（以一种hacky 方式）实现的。 我们希望保持内置助手相对轻量级，而是允许第 3 方使用助手 API 以最适合他们的方式实现他们需要的助手。

此页面目前是“车把开关助手”的第 3 个 Google 搜索结果。 为了从搜索引擎到达这里的人们的利益，这里是Chris Montrois的case子句，例如{{#case "page1"}} ：

Handlebars.registerHelper("switch", function(value, options) {
    this._switch_value_ = value;
    var html = options.fn(this); // Process the body of the switch block
    delete this._switch_value_;
    return html;
});

Handlebars.registerHelper("case", function(value, options) {
    if (value == this._switch_value_) {
        return options.fn(this);
    }
});

这是一个改进的case助手，它支持具有可变数量值的子句，例如{{#case "page1" "page2"}} ：

Handlebars.registerHelper("case", function() {
    // Convert "arguments" to a real array - stackoverflow.com/a/4775938
    var args = Array.prototype.slice.call(arguments);

    var options    = args.pop();
    var caseValues = args;

    if (caseValues.indexOf(this._switch_value_) === -1) {
        return '';
    } else {
        return options.fn(this);
    }
});

非常好，简短而甜蜜。 我过去遇到过更长的。

要添加的一些内容可能是{{#default}} {{/default}}和{{#case "value" break=true}} 。

@stevenvachon根据要求；)

module.exports = {
    switch: function(value, options) {
        this._switch_value_ = value;
        this._switch_break_ = false;
        var html = options.fn(this);
        delete this._switch_break_;
        delete this._switch_value_;
        return html;
    },
    case: function(value, options) {
        var args = Array.prototype.slice.call(arguments);
        var options    = args.pop();
        var caseValues = args;

        if (this._switch_break_ || caseValues.indexOf(this._switch_value_) === -1) {
            return '';
        } else {
            if (options.hash.break === true) {
                this._switch_break_ = true;
            }
            return options.fn(this);
        }
    },
    default: function(options) {
        if (!this._switch_break_) {
            return options.fn(this);
        }
    }
};

@Billy- 我们应该在哪里包括这个？

@jimkoul这些是辅助函数，因此取决于您的设置。

我的设置（使用 Gulp + gulp-hb）支持为导出辅助函数的 js 文件指定一个 glob 模式，如上所述，所以它看起来像这样：

// ...
.pipe(handlebars({
  helpers: 'handlebars/helpers/*.js'
})
// ...

如果您仍然不确定，请对辅助函数如何与把手一起工作，以及如何使用您正在使用的把手的任何实现来实现它们进行一些研究。

如果我们可以通过开关名称传递变量并且不必通过每个都编写完整的{{assign}} ，那就太好了。 这样选项就变成了变量值。

此外，即使在遇到这种情况时变量正在正确更改，我也会收到一条未定义的消息。

这就是我要帮手的东西

"use strict";
Handlebars.registerHelper("switch", function(value, options) {
    this._switch_value_ = value;
    this._switch_break_ = false;
    var html = options.fn(this);
    delete this._switch_break_;
    delete this._switch_value_;
    return html;
});

Handlebars.registerHelper("case", function(value, options) {
    var args = Array.prototype.slice.call(arguments);
    var options    = args.pop();
    var caseValues = args;

    if (this._switch_break_ || caseValues.indexOf(this._switch_value_) === -1) {
        return '';
    } else {
        if (options.hash.break === true) {
            this._switch_break_ = true;
        }
        return options.fn(this);
    }
});

Handlebars.registerHelper("default", function(options) {
    if (!this._switch_break_) {
        return options.fn(this);
    }
});

这是我的 hbs 文件中的内容：

{{#assign "testParam"}}foo{{/assign}}
{{#switch testParam}}
    {{#case "boo"}}{{#assign "testParam"}}case1 has been met{{/assign}}{{/case}}
    {{#case "foo" break=true}}{{#assign "testParam"}}case2 has been met{{/assign}}{{/case}}
    {{#case "tried" break=true}}{{#assign "testParam"}}case3 has been met{{/assign}}{{/case}}
    {{#case "bwahahaha" break=true}}{{#assign "testParam"}}case4 has been met{{/assign}}{{/case}}
    {{#default break=true}}{{#assign "testParam"}}nothing matched{{/assign}}{{/default}}
{{/switch}}

{{#ttpartial "testSwitch.content"}}
        {{testParam}}
{{/ttpartial}}

或出于某种原因，即使满足上述情况之一，上述情况也会使默认值始终优先。

这是我使用的：

Handlebars.registerHelper('switch', function(name, value, options) {
    this['_switch_value_' + name] = value;
    this['_switch_break_' + name] = false;
    var html = options.fn(this);
    delete this['_switch_break_' + name];
    delete this['_switch_value_' + name];
    return html;
});
Handlebars.registerHelper('case', function(name, value, options) {
    var args = Array.prototype.slice.call(arguments);
    var options    = args.pop();
    var caseValues = args;

    if ( this['_switch_break_' + name] || caseValues.indexOf(this['_switch_value_' + name]) === -1) {
        return '';
    } else {
        this['_switch_break_' + name] = true;
        return options.fn(this);
    }
});
Handlebars.registerHelper('default', function(name, options) {
    if ( !this['_switch_break_' + name] ) {
        return options.fn(this);
    }
});

开关已命名，因此可以对它们进行分支（叠瓦？不确定这个词......）
此外，在满足条件时总是会进行中断

IE：

    {{#switch "1" "aaa"}}
        {{#case "1" "aaa"}}
            {{#switch "2" "bbb"}}
                {{#case "2" "bbb"}}ok{{/case}}
            {{/switch}}
        {{/case}}
        {{#default "1"}}nok{{/default}}
    {{/switch}}

我确定我无法理解它是如何工作的，所以我为我的困惑道歉，但是......开关是否有可能在each ？ 我一直在尝试，但我不断收到错误消息。

这是我所拥有的：

{{#each columns}}
    {{#switch this}}
        {{#case 'foo'}}
        {{/case}}
        {{#case 'bar'}}
        {{/case}}
    {{/switch}}
{{/each}}

但我得到这个：

Uncaught TypeError: Cannot create property '_switch_value_' on string 'name'

在我看来， this必须是预期之外的东西，但我真的不知道。

看起来我可以通过如下更改switch来让它工作：

Handlebars.registerHelper({
    switch: function(value, options) {
        return options.fn({
            _switch_value_: value,
            _switch_break_: false
        });
    },
    //...
});

但我猜我在其他情况下会失去一些东西。 这就是说，我总是可以将这些值附加到options ，我认为它会起作用。

@比利- @a-le ？

@infinityplusone不幸的是，我多年来没有正确使用车把，所以我想自从我写

@infinityplusone如果您使用我的版本，则必须“命名”开关。
所以，以你的例子：

{{#each columns}}
    {{#switch "myswitch" this}}
        {{#case "myswitch" 'foo'}}
        {{/case}}
        {{#case "myswitch" 'bar'}}
        {{/case}}
    {{/switch}}
{{/each}}

用于嵌套开关块

Handlebars.__switch_stack__ = [];

Handlebars.registerHelper( "switch", function( value, options ) {
    Handlebars.__switch_stack__.push({
        switch_match : false,
        switch_value : value
    });
    var html = options.fn( this );
    Handlebars.__switch_stack__.pop();
    return html;
} );
Handlebars.registerHelper( "case", function( value, options ) {
    var args = Array.from( arguments );
    var options = args.pop();
    var caseValues = args;
    var stack = Handlebars.__switch_stack__[Handlebars.__switch_stack__.length - 1];

    if ( stack.switch_match || caseValues.indexOf( stack.switch_value ) === -1 ) {
        return '';
    } else {
        stack.switch_match = true;
        return options.fn( this );
    }
} );
Handlebars.registerHelper( "default", function( options ) {
    var stack = Handlebars.__switch_stack__[Handlebars.__switch_stack__.length - 1];
    if ( !stack.switch_match ) {
        return options.fn( this );
    }
} );

{{#switch state}}
    {{#case "page1" "page2"}}page 1 or 2{{/case}}
    {{#case "page3"}}page3{{/case}}
    {{#case "page4"}}page4{{/case}}
    {{#case "page5"}}
            {{#switch s}}
                {{#case "3"}}s = 3{{/case}}
                {{#case "2"}}s = 2{{/case}}
                {{#case "1"}}s = 1{{/case}}
                {{#default}}unknown{{/default}}
            {{/switch}}
    {{/case}}
    {{#default}}page0{{/default}}
{{/switch}}

var data = {
    state : 'page5',
    s : '1'
};

var html = template( data );

这个怎么样？
只是如果您想将键转换为值。

````javascript
module.exports = 函数（输入，案例，值）{
const caseArray = cases.split(',')
const valueArray = values.split(',')
const index = caseArray.indexOf(input)

返回值数组[索引]
};
车把
{{switch "Y" "Y,N,D", "YES,NO,DELETED"}}
````