Magento2 KnockoutJS – How to Find Called Methods

knockoutjsmagento2

Simple question and probably already asked but, I don't get how this knockoutJs works and I can't find any clear explanations.

I'm under vendor/magento/module-checkout/view/frontend/web/template/shipping-address/shipping-method-list.html

    <tbody>
        <!-- ko foreach: { data: rates(), as: 'method'} -->
            <!--ko template: { name: element.shippingMethodItemTemplate} --><!-- /ko -->
        <!-- /ko -->
    </tbody>

I would like to know where is located the method called with rates(). What is the way to find it ?

Thanks !

Best Answer

Open: vendor/magento/module-checkout/view/frontend/web/template/shipping.html

Check the following line:

Now open JS component: vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js

You can see the template declaration like:

shippingMethodListTemplate: 'Magento_Checkout/shipping-address/shipping-method-list',

And method:

rates: shippingService.getShippingRates(),

Related Solutions

Magento – Validation Error with jQuery-UI Autocomplete and KnockoutJs – Magento 2

Change directy the value of the knockout observable object from your custom input field.

Pass the observale in your data-bind attribute:

 shippingAutoComplete: {
        selected: selectedCity,
        options: getCities
        value: value // this is your obersable you wanna change
    },

Access it via

  var settings = valueAccessor();
  var inputValue= settings.value;

Change value

inputValue("yourValue");

Magento 2 – How to Debug in Knockout.js Template

Debugging

<div data-bind="text: ko.computed(function() { debugger; })"></div>

Print Data

<div data-bind="text: ko.toJSON(method.method_code)"></div>

Docs from Magento: https://devdocs.magento.com/guides/v2.4/ui_comp_guide/troubleshoot/ui_comp_troubleshoot_js.html

Best Answer

Related Solutions

Magento – Validation Error with jQuery-UI Autocomplete and KnockoutJs – Magento 2

Magento 2 – How to Debug in Knockout.js Template

Related Topic