handlebars.jshandlebarshelper

Structuring nested math functions in Handlebars


I am attempting to set up in Handlebars a value that should come out as two separate division math statements added together, then added to another value.

The overall pseudocode of it would be this: result + (var1 divided by 10) + (var2 divided by 100)

My attempt at Handlebars code for it is this: {{plus result (divide var1 10) plus (divide var2 100)}}

How can I adjust the structure of these statements to get these nested math functions to work? Can it work with 3 statements being added together instead of 2 that the plus helper is built around?


Solution

  • First, it isn't clear what result is.

    Second, this sort of logic really doesn't belong in a template. You would be better to do you these math operations prior to sending data to your template function.

    However, it would be possible to call your helpers in a nested fashion, but you would need to put each helper call in its own set of parens.

    The result would be:

    {{plus result (plus (divide var1 10) (divide var2 100))}}
    

    const template = Handlebars.compile('{{plus result (plus (divide var1 10) (divide var2 100))}}');
    
    Handlebars.registerHelper('divide', function (a, b) {
      return a / b;
    });
    
    Handlebars.registerHelper('plus', function (a, b) {
      return a + b;
    });
    
    const output = template({
      result: 5,
      var1: 100,
      var2: 2000
    });
    
    document.body.innerHTML = output;
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js"></script>