Handlebars custom helper

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.

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

  • It's weird, I add your code for logging and run a quick repair and the JS groupings repair and I get nothing in the console still.  No errors, no 'helper not found' errors, nothing.

    I know the handlebars file is being read because changes they made to it show up on the screen. And other handlebar directives I add run.  But no custom stuff.

    I even put some console logging in my handlebar helper and it never shows up in the console, I put a breakpoint in the JavaScript debugger and it never runs. 

  • You were 100% correct.  It was a data type issue in the case statements.