Magento – Magento 2 : How to debug knockoutjs getRegion() bindings

The Magento_Ui/js/lib/ko/initialize library is, indeed, where Magento initializes its Knockout instance. Magento does not assign a ViewModel when it applies bindings.

The missing key here is the custom KnockoutJS binding named scope.

When Magento's Knockout instance encounters a scope: binding like this

<li class="greet welcome" data-bind="scope: 'customer'">
    <span data-bind="text: customer().fullname ? $t('Welcome, %1!').replace('%1', customer().fullname) : 'Default welcome msg!'"></span>
</li>

It takes the value of that binding (named customer), and uses it to load and apply a ViewModel for the inner nodes from the uiRegistry. You can debug the data bound for a particular scope with some simple KnockoutJS pre debugging

<div data-bind="scope: 'someScope'">
    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>            
</div>

The uiRegistry is a simple dictionary like object, implemented in the Magento_Ui/js/lib/registry/registry RequireJS module.

vendor/magento/module-ui/view/base/requirejs-config.js
17:            uiRegistry:     'Magento_Ui/js/lib/registry/registry',

Objects are put into the registry via the bits of javascript that look like this

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "customer": {
                    "component": "Magento_Customer/js/view/customer",
                    "extra_data_1":"some_value",
                    "more_extra":"some_other_value",
                }
            }
        }
    }
}
</script>

The program in the Magento_Ui/js/core/app module will examine the components key of the passed in object, and for each sub-object will

1. Fetch the object returned by the specified RequireJS module from the component key (Magento_Customer/js/view/customer)

2. Use that object to instantiate a new javascript object (see below)

3. Assign any extra data keys to that same object

4. Add that same object to the uiRegistry with the key of the original object (customer above)

If you're not sure how the x-magento-init script works, I've written an article about it here.

There's a more in depth examination of the app.js process over in this answer.

The implementation of the scope binding is defined here

vendor/magento//module-ui/view/base/web/js/lib/ko/bind/scope.js

For whatever reason, in my version of Magento 2.1.4, this functionality actually does work with the full_page cache enabled. This has tripped up my team at least once before with a different issue.

php bin/magento cache:enable full_page
php bin/magento cache:status # if you're curious

Note, as you would imagine, this makes development quite tricky. My workaround workflow:

• Enable full-page caching
• Refresh page. Now you should be able to see those products in your Wishlist and Compare list. At this point, I use the Chrome Inspector to make my CSS updates. When ready, paste CSS into your text editor as usual.
• Since full-page caching is enabled, the page will not reflect your changes on refresh. Run php bin/magento cache:flush full_page.
• Now, on page refresh, you will see your CSS updates (assuming that you have the reset of the CSS workflow happening correctly).

Other than this odd example, I keep the Magento caches enabled for development except for block_html and full_page. This provides a nice balance between seeing CSS and template changes immediately while retaining the performance benefit of having the cache enabled.