Handlebars ที่ใช้บ่อยสุด

Handlebars JS คือ Template HTML ที่เขียนด้วยภาษาจาวาสคริปต์โดยใช้ข้อมูลแบบ JSON วนลูปได้ผลลัพท์ออกมาเป็น HTML นำไปแสดงบนหน้าเว็บ ก็อปไปใช้จะช่วยงานได้เร็วขึ้น

#unless ตรวจสอบค่าเป็นเท็จ ตรงข้ามกับ #if จะตรวจสอบค่าเป็นจริง

{{#unless isValid}}
  //do
{{/unless}}

นับจำนวน Array ด้วย Handlebarjs สามารถใช้ length วางไว้ใน Template ได้เลย

{{array.length}}

Handlebars การเข้าถึงค่า Parent ขณะ Loop ข้อมูลชนิด Object

var viewData = {
    itemSize: 20,
    items: [
        'Woot', 'Boonvongsa'
    ]
};

//ใช้ ../ ใสการแสดงค่า itemSize ขณะวนลูป items

{{#each items}}
    {{../itemSize}}
    ...
{{/each}}

คำสั่งตรวจสอบเงื่อนไขของ Handlebar

{{#ifCond[ตัวแปร] "!==" 0}}
//do
{{else}}
//do
{{/ifCond}}

Handlebars.registerHelper('ifCond', function (v1, operator, v2, opts) {
    var isTrue = false;
    switch (operator) {
        case '===':
            isTrue = v1 === v2;
            break;
        case '!==':
            isTrue = v1 !== v2;
            break;
        case '<':
            isTrue = v1 < v2;
            break;
        case '<=':
            isTrue = v1 <= v2;
            break;
        case '>':
            isTrue = v1 > v2;
            break;
        case '>=':
            isTrue = v1 >= v2;
            break;
        case '||':
            isTrue = v1 || v2;
            break;
        case '&&':
            isTrue = v1 && v2;
            break;
    }
    return isTrue ? opts.fn(this) : opts.inverse(this);
});

การใช้ if ตรวจสอบ 2 ตัวแปร

Handlebars.registerHelper("ifItemSelected", function (item, block) {
  var selected = false;

  if (selected) {
    return block(this);
  }
});

เขียนฟังชั่นค์ให้ Handlebar ตัวอย่างเช่นฟังชั่นชื่อ ZeroToDash รับค่าตัวแปร number

วิธีใช้:  {{ZeroToDash number}} ผลลัพท์คือ - (หาก number มีค่า 0)

Handlebars.registerHelper("ZeroToDash", function (number) {
  let text = number;

  if (number == 0) {
    text = "-";
  }
  return new Handlebars.SafeString(text);
});

 รวมฟังค์ชั่น Handlebar

Handlebars.registerHelper('attach', function (att) {
    let text = '';
    try {
        if ((typeof att != "undefined") || (att.lenght > 0)) {
            text = `[text]`;
        }
    } catch (err) { }
    return new Handlebars.SafeString(text);
});        
Handlebars.registerHelper('cssfac', function (css) {
    let text = '';
    try {
        if (css == 'usablearea' || css == 'bed' || css == 'bath')
        { text = lang; }
    }
    catch (err) { }
    return new Handlebars.SafeString(text);
});
Handlebars.registerHelper('JsonDate', function (val) {
    let text = '';
    try {
        text = Common.JSONDate(val);
    }
    catch (err) { }
    return new Handlebars.SafeString(text);
});
Handlebars.registerHelper('lang', function () {
    let hlang = '';
    if ($('#hlang').length) {
        if ($('#hlang').val() === 'en')
        { hlang = '/en'; }
    }
    return new Handlebars.SafeString(Config.web[Config.web.mode].host + hlang);
});
Handlebars.registerHelper('NearPrice', function (StartPrice) {
    let priceMillion = (StartPrice / 1000000).toFixed(2);
    return new Handlebars.SafeString(priceMillion);
});
Handlebars.registerHelper('numberFormat', function (ListPrice) {
    let ListPriceFormat = Common.commaSeparateNumber(ListPrice);
    return new Handlebars.SafeString(ListPriceFormat);
});
Handlebars.registerHelper('calculatePriceDiscount', function (ListPrice, PercentDiscount) {
    let percentCalculatePrice = ((ListPrice * (PercentDiscount)) / 100).toFixed(0);
    percentCalculatePrice = Common.commaSeparateNumber(percentCalculatePrice);
    return new Handlebars.SafeString(percentCalculatePrice);
});
Handlebars.registerHelper('excludeWord', function (word, exclude) {
    const excludeWord = 'เขต';
    let resultWord = word.replace(excludeWord, '');
    return new Handlebars.SafeString(resultWord);
});
Handlebars.registerHelper('IsLandArea', function (rai, ngan, wa) {
    const isZero = (rai + ngan + wa == 0) ? "N/A" : "";
    return new Handlebars.SafeString(isZero);
});
Handlebars.registerHelper('commissionCalculator', function (listPrice, commisionRate) {
    const isZero = (rai + ngan + wa == 0) ? "N/A" : "";
    return new Handlebars.SafeString(isZero);
});

อ่านเพิ่มเติมคลิก: https://handlebarsjs.com/guide/#what-is-handlebars