how to pass dynamic values in knockout js template file?

Question

Please look at https://github.com/sivajik34/Delivery-Signature-Magento2.

app/code/Kensium/DeliverySign/view/frontend/web/template/checkout/shipping/delivery-signature.html

<div data-bind="visible: canVisibleDeliverySignBlock">
<input type="checkbox" name="delivery-signature" value="delivery-signature"> <span class="price"><span data-bind="text: getFormattedPrice(delivery-signature)" class="price">$5.00</span></span>Delivery Signature<br>
</div>

How to make $5 value as dynamic from config.I think I'm almost near to solution.but i have no proper idea on knockout.js

can you please help me on this?

Answer 1

Modify your js by following code:

define([
        'ko',
        'uiComponent',
        'Magento_Checkout/js/model/quote',
        'Magento_Catalog/js/price-utils'

    ], function (ko, Component, quote, priceUtils) {
        'use strict';
        var totals = quote.getTotals()();
        var subtotal = 0;
        if (totals) {
            subtotal = totals.subtotal;
        }
        var show_hide_deliverysign_blockConfig = window.checkoutConfig.show_hide_deliverysign_block;
        var minimum_order_amount = window.checkoutConfig.minimum_order_amount;
        var delivery_sign_amount = window.checkoutConfig.delivery_sign_amount;
        return Component.extend({
            defaults: {
                template: 'Kensium_DeliverySign/checkout/shipping/delivery-signature'
            },
            canVisibleDeliverySignBlock: show_hide_deliverysign_blockConfig,
            getFormattedPrice: ko.observable(priceUtils.formatPrice(minimum_order_amount, quote.getPriceFormat()))
        });
    });

And template should be

<div data-bind="visible: canVisibleDeliverySignBlock">
    <input type="checkbox" name="delivery-signature" value="delivery-signature"> <span data-bind="text: getFormattedPrice()" class="price"></span></span>Delivery Signature

</div>