Unable to process binding click: function()

Question

I'm trying to implement a click event in one of the button I added under the Magento_Checkout module specifically under payment.html view. Now I added the below code

File location: app/design/frontend/Vendor/Module/Magento_Checkout/web/template/payment.html

<form id="co-payment-form" class="form payments" novalidate="novalidate">
 <fieldset class="fieldset"> 
 <button type="button" data-bind="click: goBackShipping">Back from template</button>
 </fieldset>
</form>

Now what I want is that the goBackShipping will be triggered using KnockoutJS functionality. But I'm getting this error

knockout.js:3391 Uncaught ReferenceError: Unable to process binding "click: function(){return goBackShipping }"

This goBackShipping function is added in the checkout-data.js under the folder

app/design/frontend/Vendor/Module/Magento_Checkout/web/js/checkout-data.js

and here is the code I added

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
 /**
 * Checkout adapter for customer data storage
 *
 * @api
 */
 define([
 'jquery',
 'Magento_Customer/js/customer-data',
 'jquery/jquery-storageapi'
 ], function (,ドル storage) {
 'use strict';
 var cacheKey = 'checkout-data',
 /**
 * @param {Object} data
 */
 saveData = function (data) {
 storage.set(cacheKey, data);
 },
 // This is the newly added function
 goBackShipping = function () {
 alert("Preparing to go back");
 window.history.back();
 },
 /**
 * @return {*}
 */
 initData = function () {
 return { ... };
 },
 };
});

Honestly I have no idea why it's giving an error like that. Am I doing something wrong? (obviously yes because it's giving an error).

I would only like to implement a button click action using knockoutjs and simple javascript alert. But I can't get pass this error.

Answer 1

Your method needs to add the following class:

vendor/magento/module-checkout/view/frontend/web/js/view/payment.js

So overwrite this and add your method here.

goBackShipping: function () {
 alert("Preparing to go back");
 window.history.back();
},

• MadzQuestioning: Initially this is what I did but I'm still getting the error. That is why I ended up using the checkout-data.js. But the problem is neither of the two work.
• Rutvee Sojitra: @MadzQuestioning sohel's solution is perfect and it's working perfectly in mycode Please try again pasting this code and check agian
• Sohel Rana: @MadzQuestioning you definitely made a mistake. Did you clear pub/static? IF you working on developer mode then no need to clear pub/static. Should clear browser js cache.