Handlebars custom helper

Question

I have been trying to make a custom handlebars helper

This is the helper file

/**
 * Handlebars helpers.
 *
 * These functions are to be used in handlebars templates.
 * @class Handlebars.helpers
 * @singleton
 */
(function (app) {
    app.events.on("app:init", function () {

        /**
         * convert a string to upper case
         */
        Handlebars.registerHelper('tristate', function (value) {
            let markup = '';
            switch (value) {
                case '1':
                    markup = "CHECKED";
                    break;
                case '2':
                    markup = "indeterminate=1";
                    break;
                default:
                    markup = "";
                    break;
            }
            return markup;
        });

    });
})(SUGAR.App);

Then I have my JSGroupings file

<?php
//Loop through the groupings to find grouping file you want to append to
foreach ($js_groupings as $key => $groupings) {
	foreach ($groupings as $file => $target) {
		//if the target grouping is found
		if ($target == 'include/javascript/sugar_grp7.min.js') {
			//append the custom JavaScript file
			$js_groupings[$key]['custom/javascript/jquery.tristate.js'] = 'include/javascript/sugar_grp7.min.js';
			$js_groupings[$key]['custom/javascript/handleBar-helpers.js'] = 'include/javascript/sugar_grp7.min.js';
			break;
		}
	}
}

And this is in the HBS file

<input id={{this.id}} type="checkbox" checkedvalue="1" uncheckedvalue="0"
    indeterminatevalue="2" class="row-checkbox" data-name="tristate"
    data-populated-row="{{this.populated_row}}" {{tristate this.checked}}"/>

It never seems to run the helper at all. I have cleared the cache/, run the repairs, verified that the JS is where it should be in the sugar_grp7.min.js file.

I also cant find where the {{log this}} is logging to. Its not the console or the Sugar log file.

Kenneth Brill · Accepted Answer

It looks like you have the JSGroupings and hbs-helper stuff set up right. A couple of things i'd try: 
 - inside your tristate helper console.log(value) and make sure the right thing is being passed in or that the log statement is getting called at all - is value being passed in as a number thus not being caught by case '1'. switch statements use strict equality (triple equals) comparison so if this.checked = "1" it should catch it but if this.checked = 1 it will go to that default and return an empty string - double-check the checkbox input is in the DOM - is the template rendering correctly and your helper is getting called 
 I've never had any luck using {{log }} or the App.logger for that matter, I usually throw my own in there like: 
 Handlebars.registerHelper('debug', function(a, b, c) {
 console.log('---');
 console.log('this: ', this);
 console.log('a: ', a);
 console.log('b: ', b);
 console.log('c: ', c);
}); 
 so I can call {{debug ../this ../../this ../../../this}} or something similar when i'm trying to figure out which context is which in the hbs nesting. 
 If your handleBar-helpers.js was not getting added and your {{tristate code was getting added to the DOM you'd get console error messages saying the tristate helper was not found. So either your template with {{tristate is not getting used, or the value being passed in is wrong for your switch statement.