Handlebars.js: {{#स्विच}} सहायक

यह कुछ ऐसा है जिसे मानक सहायकों का उपयोग करके (हैकी तरीके से) हासिल किया जा सकता है। हम बिल्टिन हेल्पर्स को अपेक्षाकृत हल्का रखना चाहते हैं, इसके बजाय तीसरे पक्ष को हेल्पर एपीआई का उपयोग करके उनके लिए आवश्यक हेल्पर्स को लागू करने की अनुमति देता है, जो उन्हें सबसे अच्छा लगता है।

यह पृष्ठ वर्तमान में "हैंडलबार स्विच सहायक" के लिए तीसरा Google खोज परिणाम है। एक खोज इंजन से यहां आने वाले लोगों के लाभ के लिए, यहां क्रिस मॉन्ट्रोइस द्वारा एक कार्यान्वयन है जो एकल-मूल्य 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);
        }
    }
};

@ बिली- हमें इसे कहां शामिल करना चाहिए?

@jimkoul ये सहायक कार्य हैं इसलिए यह आपके सेट अप पर निर्भर करता है।

मेरा सेट अप (गुलप + गल्प-एचबी के साथ) जेएस फाइलों के लिए एक ग्लोब पैटर्न निर्दिष्ट करने का समर्थन करता है जो ऊपर के रूप में सहायक कार्यों को निर्यात करता है, इसलिए यह इस तरह दिखता है:

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

मेरे पास मेरी एचबीएस फाइल में यही है:

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

स्विच का नाम दिया गया है, इसलिए उन्हें शाखा देना संभव है (इम्ब्रिकेशन? शब्द के बारे में निश्चित नहीं है ...)
साथ ही, ब्रेक हमेशा तब किया जाता है जब कोई शर्त पूरी होती है

अर्थात:

    {{#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 जोड़ सकता हूं, और मुझे लगता है कि यह काम करेगा।

@ बिली- @ ए-ले?

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

इस बारे में कैसा है?
बस अगर आप कुंजी को मूल्य में बदलना चाहते हैं।

````जावास्क्रिप्ट
मॉड्यूल.एक्सपोर्ट्स = फ़ंक्शन (इनपुट, केस, मान) {
कॉन्स्ट केसअरे = केस। स्प्लिट (',')
const valueArray = value.split(',')
कॉन्स्ट इंडेक्स = caseArray.indexOf (इनपुट)

वापसी मूल्यअरे [सूचकांक]
};
हैंडलबार
{{स्विच "वाई" "वाई, एन, डी", "हां, नहीं, हटा दिया गया"}}
````