Is it possible / what is the recommended approach to add a new custom binding to knockout in Magento 2?

Question

I understand Magento 2 registers a number of custom knockout bindings in the Magento_Ui module, specifically through the initialize script in:

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

What's not yet clear to me is how I should go about registering my own custom binding from my own module.

Are there any other examples of custom bindings I could use for reference or any other documentation on the recommended approach to this in Magento 2?

Answer 1

The answer is Yes.

There's a simple example from the core team shown in module-configurable-product.

//file: vendor/magento/module-configurable-product/view/adminhtml/web/js/variations/steps/attributes_values.js

//connect items with observableArrays
ko.bindingHandlers.sortableList = {
    init: function (element, valueAccessor) {
        var list = valueAccessor();

        $(element).sortable({
            axis: 'y',
            handle: '[data-role="draggable"]',
            tolerance: 'pointer',
            update: function (event, ui) {
                var item = ko.contextFor(ui.item[0]).$data,
                    position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);

                if (ko.contextFor(ui.item[0]).$index() != position) {
                    if (position >= 0) {
                        list.remove(item);
                        list.splice(position, 0, item);
                    }
                    ui.item.remove();
                }
            }
        });
    }
};

Alan Storm also provides a great introduction to this in his KnockoutJS Primer for Magento Developers article.