call function inside ko.bindingHandlers knockoutjs

Question

I'm trying to call a custom function inside the initialize ko.bindingHandlers function but getting the below issue.

Message: Cannot read properties of undefined (reading 'tConvert')

My code for reference.

define(
    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator',
        'Magento_Customer/js/model/customer',
        "jquery",
        "mage/calendar"
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator,
        customer,
        $
    ) {
        'use strict';
        
        
        return Component.extend({
            defaults: {
                template: 'BS_Checkout/delivery-date'
            },

            stepCode: 'delivery',
            //step title value
            stepTitle: 'Delivery',
           
            /**
            *
            * @returns {*}
            */
            initialize: function () {
                this._super();

                ko.bindingHandlers.deliveryslot = {
                    init: function (element, valueAccessor, allBindingsAccessor) {
                        
                        let slot = JSON.parse(window.checkoutConfig.delivery_time_slot);
                        let i = 0;
                        for (let key in slot) {
                            
                            slot[key].from = this.tConvert(slot[key].from.join(":"))
                            slot[key].to = slot[key].to.join(":")
                        }
                        
                    }
                }
                // register your step
                stepNavigator.registerStep(
                    this.stepCode,
                    //step alias
                    null,
                    this.stepTitle,
                    //observable property with logic when display step or hide step
                    this.isVisible,

                    _.bind(this.navigate, this),
                    1
                );

                return this;
            },
            tConvert: function  (time) {
                // Check correct time format and split into components
                time = time.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];

                if (time.length > 1) { 
                    time = time.slice (1);  
                    time[5] = +time[0] < 12 ? 'AM' : 'PM'; 
                    time[0] = +time[0] % 12 || 12; 
                }
                return time.join ('');
            },
            navigate: function () {

            },

            /**
            * @returns void
            */
            navigateToNextStep: function () {
                stepNavigator.next();
            }
        });
    }
);

I'm trying to call tConvert inside ko.bindingHandlers.deliveryslot.

Answer 1

It looks like the context of this is not what you think it is.

Try adding the below line to the top of the initialize function:

const self = this;

And then call it using self not this.

self.tConvert...