magento2 knockoutjs custom ship-to template binding

Question

There are some questions need your help.

Could you explain the following code? Can any one have idea how address() object works? At least Where can I find definition of address()?

<!-- ko if: (isVisible()) -->
<div class="shipping-information">
    <div class="ship-to">
        <div class="shipping-information-title">
            <span data-bind="i18n: 'Ship To:'"></span>
            <button class="action action-edit" data-bind="click: back">
                <span data-bind="i18n: 'edit'"></span>
            </button>
        </div>
        <div class="shipping-information-content">
            <!-- ko foreach: getRegion('ship-to') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
    </div>
    <div class="ship-via">
        <div class="shipping-information-title">
            <span data-bind="i18n: 'Shipping Method:'"></span>
            <button class="action action-edit" data-bind="click: backToShippingMethod">
                <span data-bind="i18n: 'edit'"></span>
            </button>
        </div>
        <div class="shipping-information-content">
            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
        </div>
    </div>
</div>
<!--/ko-->


<!-- ko if: (visible()) -->
<!-- ko text: address().prefix --><!-- /ko --> <!-- ko text: address().firstname --><!-- /ko -->
<!-- ko text: address().lastname --><!-- /ko --> <!-- ko text: address().suffix --><!-- /ko --><br/>
<!-- ko text: address().street --><!-- /ko --><br/>
<!-- ko text: address().city --><!-- /ko -->, <!-- ko text: address().region --><!-- /ko --> <!-- ko text: address().postcode --><!-- /ko --><br/>
<!-- ko text: getCountryName(address().countryId) --><!-- /ko --><br/>
<!-- ko text: address().telephone --><!-- /ko --><br/>
<!-- /ko -->

Answer 1

How I usually debug UI Components

I couldn't find the exact code you need but here are some of my tips and findings, I'll use some related shipping address code as an example.

Layout

The first step is to look at the XML to check the configuration, so open up magento/module-checkout/view/frontend/layout/checkout_index_index.xml and look at lines 420.

<item name="shipping-information" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information</item>
    <item name="config" xsi:type="array">
        <item name="deps" xsi:type="string">checkout.steps.shipping-step.shippingAddress</item>
    </item>
    <item name="displayArea" xsi:type="string">shipping-information</item>
    <item name="children" xsi:type="array">
        <item name="ship-to" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information/list</item>
            <item name="displayArea" xsi:type="string">ship-to</item>
        </item>
    </item>
</item>

Now this gives us some helpful information, mainly:

Component - This is the JS file which is a good place to look.

The JS

Open up magento/module-checkout/view/frontend/web/js/view/shipping-information.js.

Here you will find the logic responsible for rendering the shipping area, if you look on line 19 you'll also see the template used for rendering the information:

template: 'Magento_Checkout/shipping-information'

So let's have a look there.

The template

Open up magento/module-checkout/view/frontend/web/template/shipping-information.html and here you will see many Knockout bindings such as click: backToShippingMethod on line 26. Now to debug that look in the JS file for backToShippingMethod. This returns the function:

backToShippingMethod: function() {
    sidebarModel.hide();
    stepNavigator.navigateTo('shipping', 'opc-shipping_method');
}

Your example

I've used the above steps on your example and I've ended up in a maze of shipping and address JS. A few files look like they might be what you're after though:

• magento/module-checkout/view/frontend/web/js/model/new-customer-address.js - I think this may be the one
• magento/module-checkout/view/frontend/web/js/model/quote.js
• magento/module-checkout/view/frontend/web/js/model/shipping-rate-processor/new-address.js

I know this isn't an answer that solves your issue but I hope it helps, if I get more time I will revisit it.

Answer 2

From what i known you can find the definition of address in:

vendor/magento/module-checkout/view/frontend/web/js/view/shipping-information/list.js

on line: 77