Handlebars.js: {{#switch}} pembantu

Ini adalah sesuatu yang dapat dicapai (dengan cara hacky) menggunakan pembantu standar. Kami ingin membuat helper bawaan relatif ringan, sebagai gantinya memungkinkan pihak ketiga untuk mengimplementasikan helper yang mereka butuhkan, dengan cara yang paling sesuai untuk mereka, menggunakan API helper.

Halaman ini saat ini merupakan hasil pencarian Google ke-3 untuk "Pembantu sakelar setang". Untuk kepentingan orang-orang yang datang ke sini dari mesin pencari, inilah implementasi oleh Chris Montrois yang mendukung klausa case nilai tunggal seperti {{#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);
    }
});

Inilah pembantu case yang ditingkatkan yang mendukung klausa dengan sejumlah nilai variabel, seperti {{#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);
    }
});

Sangat bagus, pendek dan manis. Saya pernah menemukan yang lebih panjang di masa lalu.

Beberapa hal untuk ditambahkan mungkin {{#default}} {{/default}} dan {{#case "value" break=true}} .

@stevenvachon Seperti yang diminta ;)

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- Di mana kita harus memasukkan ini?

@jimkoul Ini adalah fungsi pembantu jadi itu tergantung pada pengaturan Anda.

Pengaturan saya (dengan Gulp + gulp-hb) mendukung penentuan pola glob untuk file js yang mengekspor fungsi pembantu, seperti di atas, sehingga terlihat seperti ini:

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

Jika Anda masih tidak yakin, lakukan sedikit riset tentang bagaimana fungsi pembantu bekerja dengan setang, dan bagaimana menerapkannya dengan implementasi setang apa pun yang Anda gunakan.

Akan lebih baik jika kita bisa melewati variabel melalui nama switch dan tidak harus menulis {{assign}} melalui masing-masing. Dengan begitu opsi menjadi nilai variabel.

Selain itu saya juga mendapatkan pesan yang tidak terdefinisi meskipun variabel berubah dengan benar ketika kasus terpenuhi.

Ini adalah apa yang saya miliki untuk penolong

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

Inilah yang saya miliki di file hbs saya:

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

atau beberapa alasan diatas membuat default selalu diutamakan walaupun salah satu kasus diatas terpenuhi.

Inilah yang saya gunakan:

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

Sakelar diberi nama, sehingga dimungkinkan untuk bercabang (imbrication ? tidak yakin dengan kata ...)
Juga, istirahat selalu dilakukan ketika suatu kondisi terpenuhi

yaitu:

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

Saya yakin saya gagal memahami beberapa cara kerjanya, jadi saya mohon maaf atas kebingungan saya, tapi... Apakah mungkin sakelar berfungsi dalam each ? Saya sudah mencobanya, tetapi saya terus mendapatkan kesalahan.

Inilah yang saya dapatkan:

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

Tapi saya mendapatkan ini:

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

Tampaknya bagi saya bahwa this pasti sesuatu yang lain dari yang diharapkan, tetapi saya tidak benar-benar tahu.

Sepertinya saya bisa membuatnya berfungsi dengan mengubah switch sebagai berikut:

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

Tapi kurasa aku kehilangan sesuatu untuk kasus lain. Ini mengatakan, saya selalu dapat melampirkan nilai-nilai ini ke options , dan saya pikir itu akan berhasil.

@Billy- @a-le ?

@infinityplusone sayangnya saya belum pernah menggunakan setang dengan benar selama bertahun-tahun, jadi saya membayangkan bahwa implementasi pembantu mungkin telah banyak berubah sejak saya menulis itu, yang mungkin mengapa itu tidak berfungsi seperti yang diharapkan. Saya tidak yakin meskipun, maaf mengecewakan.

@infinityplusone Jika Anda menggunakan versi saya, Anda harus "memberi nama" sakelar.
Jadi, dengan contoh Anda:

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

untuk blok sakelar bersarang

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

Bagaimana dengan ini?
hanya jika Anda ingin mengonversi kunci menjadi nilai.

````javascript
module.exports = function(input, case, values) {
const caseArray = case.split(',')
const nilaiArray = nilai.split(',')
indeks const = caseArray.indexOf(masukan)

mengembalikan nilaiArray[indeks]
};
setang
{{sakelar "Y" "Y,N,D", "YA,TIDAK,DIHAPUS"}}
````