Handlebars.js: {{#switch}} Helfer

Dies ist etwas, das (auf hackige Weise) mit Standard-Helfern erreicht werden kann. Wir möchten, dass die eingebauten Helfer relativ leichtgewichtig bleiben, anstatt es Dritten zu ermöglichen, die benötigten Helfer mithilfe der Helfer-API so zu implementieren, wie es ihnen am besten passt.

Diese Seite ist derzeit das 3. Google-Suchergebnis für "Lenkerschalter-Helfer". Zum Nutzen der Leute, die über eine Suchmaschine hierher gelangen, ist hier eine Implementierung von Chris Montrois , die Einzelwert- case Klauseln wie {{#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);
    }
});

Hier ist ein verbesserter case Helfer, der Klauseln mit einer variablen Anzahl von Werten unterstützt, z. B. {{#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);
    }
});

Sehr schön, kurz und bündig. Ich bin in der Vergangenheit auf viel längere gestoßen.

Ein paar Dinge, die hinzugefügt werden müssen, sind {{#default}} {{/default}} und {{#case "value" break=true}} .

@stevenvachon Wie gewünscht ;)

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- Wo sollen wir das einfügen?

@jimkoul Dies sind

Mein Setup (mit Gulp + gulp-hb) unterstützt die Angabe eines Glob-Musters für js-Dateien, die Hilfsfunktionen exportieren, wie oben, also sieht es so aus:

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

Wenn Sie sich immer noch nicht sicher sind, recherchieren Sie ein wenig, wie Hilfsfunktionen mit Lenkern funktionieren und wie Sie sie mit jeder von Ihnen verwendeten Lenkerimplementierung implementieren.

Es wäre schön, wenn wir Variable durch den Switch-Namen übergeben könnten und nicht jeweils ein komplettes {{assign}} schreiben müssen. Auf diese Weise wird die Option zum Variablenwert.

Außerdem erhalte ich eine undefinierte Meldung, obwohl sich die Variable korrekt ändert, wenn der Fall erfüllt ist.

Das habe ich für den Helfer

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

Das habe ich in meiner hbs-Datei:

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

oder aus einem der oben genannten Gründe hat die Vorgabe immer Vorrang, selbst wenn einer der oben genannten Fälle erfüllt ist.

Folgendes verwende ich:

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

Die Schalter sind benannt, so dass man sie verzweigen kann (Begriff ? bin mir beim Wort nicht sicher...)
Außerdem wird eine Pause immer ausgeführt, wenn eine Bedingung erfüllt ist

dh:

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

Ich bin sicher, dass ich einiges von der Funktionsweise nicht verstehe, also entschuldige ich mich für meine Verwirrung, aber... Ist es möglich, dass der Schalter innerhalb von each funktioniert? Ich habe es ausprobiert, bekomme aber immer wieder Fehler.

Folgendes habe ich:

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

Aber ich bekomme das:

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

Es scheint mir, dass this etwas anderes sein muss als erwartet, aber ich weiß es nicht wirklich.

Anscheinend konnte ich es zum Laufen bringen, indem ich das switch wie folgt geändert habe:

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

Aber ich schätze, ich verliere etwas für andere Fälle. Das heißt, ich könnte diese Werte immer an options anhängen, und ich denke, es würde funktionieren.

@Billy- @a-le ?

@infinityplusone leider habe ich den Lenker seit Jahren nicht richtig verwendet, daher kann ich mir vorstellen, dass sich die

@infinityplusone Wenn Sie meine Version verwenden, müssen Sie den Schalter "benennen".
Also mit deinem Beispiel:

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

für verschachtelten Schalterblock

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

Wie wäre es damit?
nur wenn Sie Schlüssel in Wert umwandeln möchten.

````javascript
module.exports = Funktion (Eingabe, Fälle, Werte) {
const caseArray = case.split(',')
const valueArray = values.split(',')
const index = caseArray.indexOf(Eingabe)

RückgabewertArray[Index]
};
Lenker
{{Schalter "Y" "Y,N,D", "JA,NEIN,GELÖSCHT"}}
````