Handlebars.js: {{#switch}} 도우미

이것은 표준 도우미를 사용하여 (해키 방식으로) 달성할 수 있는 것입니다. 우리는 제3자가 도우미 API를 사용하여 가장 적합한 방식으로 필요한 도우미를 구현할 수 있도록 하는 대신 내장 도우미를 상대적으로 가볍게 유지하고자 합니다.

이 페이지는 현재 "핸들바 스위치 도우미"에 대한 3번째 Google 검색 결과입니다. 검색 엔진에서 여기로 오는 사람들을 위해 {{#case "page1"}} 와 같은 단일 값 case 절을 지원 하는 Chris Montrois의 구현이 있습니다 .

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 "page1" "page2"}} 와 같이 다양한 값의 절을 지원하는 개선된 case 도우미입니다.

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

스위치에 이름이 지정되어 있으므로 분기할 수 있습니다(imbrication? 단어가 ​​확실하지 않음...)
또한 조건이 충족되면 항상 break가 수행됩니다.

즉:

    {{#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 연결할 수 있으며 작동할 것이라고 생각합니다.

@Billy- @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 );

이것은 어떤가요?
키를 값으로 변환하려는 경우에만.

````자바스크립트
module.exports = function(입력, 케이스, 값) {
const caseArray = case.split(',')
const valueArray = values.split(',')
상수 인덱스 = caseArray.indexOf(입력)

반환 값 배열[인덱스]
};
핸들바
{{스위치 "Y" "Y,N,D", "예, 아니오, 삭제됨"}}
````