0

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.

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.