How to pass the value and call js function from template.html using knockout js in(in checkout page) Magento 2?

Question

I have to call and pass value to the js function(showPopup())from the template(when clicking the Verify OTP button). How to achieve this?. But now i am not able to call the js function.

layout file

<item name="telephone" xsi:type="array">                                                                                                                          
    <item name="config" xsi:type="array">
    <item name="elementTmpl" xsi:type="string">Vendor_module/form/element/phone.html</item>
        <item name="tooltip" xsi:type="array">
            <item name="description" xsi:type="string" translate="true">For delivery questions.</item>
        </item>
    </item>
</item>

Vendor_module/view/frontend/web/js/view/form/element/phone.js

define([
    'Magento_Ui/js/form/form'
], function(Component) {
    'use strict';
    return Component.extend({
        defaults: {
            template: 'Vendor_module/form/element/phone',
        },
        initialize: function () {
            this._super();
            // component initialization logic
            return this;
        },

        /**
         * Form submit handler
         *
         * This method can have any name.
         */
        showPopup: function(){
          i need to get my phone number
        }

    });
});

Vendor_module/view/frontend/web/template/form/element/phone.html

 <!-- input field element and corresponding bindings -->
    <input class="input-text" type="number" data-bind="
        value: value,
        valueUpdate: 'keyup',
        hasFocus: focused,
        attr: {
            name: inputName,
            placeholder: placeholder,
            'aria-describedby': noticeId,
            id: uid,
            disabled: disabled
        }" />
    <!-- additional content -->
    <div class="primary">
        <button class="action primary" data-bind="click:showPopup">
            <span>Verify OTP</span>
        </button>
    </div>

Answer 1

Try

<button class="action primary" data-bind="click: showPopup.bind($data)">
       <span>Verify OTP</span>
</button>

Inside your method showPopup js code

showPopup: function(){
   var _self = this;
   console.log(_self.value());
}

Answer 2

You can put your js function direclty in html like this :

<div class="primary" 
     data-bind="afterRender: function(){
         jQuery('button#phone').click(function() {
             alert('it works');
         });
     }">
    <button id="phone" class="action primary"><span>Verify OTP</span></button>
</div>

If you also want to get some value from outside, you can take a look at this.

Answer 3

The js file need to be defined in the layout.

 <item name="component" xsi:type="string">Vendor_module/js/view/form/element/phone</item>

I added the above code the layout file.

<item name="telephone" xsi:type="array">
    <item name="component" xsi:type="string">Vendor_module/js/view/form/element/phone</item>                                                                                     
    <item name="config" xsi:type="array">
        <item name="elementTmpl" xsi:type="string">Vendor_module/form/element/phone.html</item>
        <item name="tooltip" xsi:type="array">
            <item name="description" xsi:type="string" translate="true">For delivery questions.</item>
        </item>
    </item>
</item>