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 $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 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.