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.