Handlebars.js: {{#switch}}

هذا شيء يمكن تحقيقه (بطريقة متطرفة) باستخدام أدوات مساعدة قياسية. نرغب في إبقاء المساعدين المدمجين خفيفين نسبيًا ، بدلاً من السماح للأطراف الثالثة بتنفيذ المساعدين الذين يحتاجون إليها ، بالطريقة التي تناسبهم بشكل أفضل ، باستخدام واجهة برمجة التطبيقات المساعدة.

هذه الصفحة هي حاليًا ثالث نتيجة بحث في 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);
        }
    }
};

@ بيلي - أين يجب أن ندرج هذا؟

jimkoul هذه وظائف مساعدة لذا فهي تعتمد على الإعداد الخاص بك.

يدعم الإعداد الخاص بي (مع Gulp + gulp-hb) تحديد نمط glob لملفات js التي تقوم بتصدير الوظائف المساعدة ، كما هو مذكور أعلاه ، لذلك يبدو كما يلي:

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

تم تسمية المفتاح ، لذلك من الممكن تفرعهم (التداخل؟ لست متأكدا من الكلمة ...)
أيضًا ، يتم إجراء الاستراحة دائمًا عند استيفاء أحد الشروط

بمعنى آخر:

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

وماذا عن هذا؟
فقط إذا كنت تريد تحويل المفتاح إلى قيمة.

جافا سكريبت
module.exports = الوظيفة (الإدخال ، الحالات ، القيم) {
const caseArray = cases.split ('،')
const valueArray = القيم. تقسيم ('،')
فهرس const = caseArray.indexOf (إدخال)

قيمة إرجاع صفيف [فهرس]
} ؛
المقاود
{{switch "Y" "Y، N، D"، "YES، NO، DELETED"}}
""