Recent Posts


Magento 2: uiElement registerNodes Defaults


Frustrated by Magento? Then you’ll love Commerce Bug, the must have debugging extension for anyone using Magento. Whether you’re just starting out or you’re a seasoned pro, Commerce Bug will save you and your team hours everyday. Grab a copy and start working with Magento instead of against it.

Updated for Magento 2! No Frills Magento Layout is the only Magento front end book you'll ever need. Get your copy today!

Wrapping up our uiElement defaults, we have the registerNodes defaults

#File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js
    /* ... */
    registerNodes: true,        
    /* ... */

This is another node that you don’t need to worry too much about. Magento uses this to identify the uiElement objects in the Magento_Ui/js/lib/knockout/extender/bound-nodes extension.

The Magento_Ui/js/lib/knockout/extender/bound-nodes RequireJS module is included as a dependency in the Knockout.js bootstrap module. It’s initial loading will wrap the ko.applyBindings and ko.cleanNode method with some custom code that (appears to) store certain bound nodes and view models in a javascript WeakMap. However, if the passed in view model does not contain the registerNodes flag, then Magento skips adding it

#File: vendor/magento/module-ui/view/base/web/js/lib/knockout/extender/bound-nodes.js
if (data && data.registerNodes) {
    addBounded(data, node);

The module also returns an object with an interface to the WeapMap that stores the bound nodes. You can see it in action with the following code (run this on the Customers -> All Customers page)

reg = requirejs('uiRegistry')
viewModel = reg.get('customer_listing.customer_listing.customer_columns');
boundNodes = requirejs('Magento_Ui/js/lib/knockout/extender/bound-nodes')

console.log( boundNodes.get(viewModel) );

Unfortunately, I’m not sure what purpose this Magento_Ui/js/lib/knockout/extender/bound-nodes registry serves. Between my lack of understanding w/r/t Knockout.js internals and Magento’s love of jQuery Deferred objects, it’s not 100% obvious what all this is for.

However – as a defaults that you need to worry about when creating UI Components, this is one you can safely ignore.

Copyright © Alana Storm 1975 – 2023 All Rights Reserved

Originally Posted: 29th November 2016

email hidden; JavaScript is required