I've seen this customizeNameListeners method in the product add/edit form modifier.

Inside it, there is an array that contains a member called imports

    'imports' => [
                'handleNameChanges' => '${$.provider}:data.product.name',
                'handleDescriptionChanges' => '${$.provider}:data.product.description',
                'handleSkuChanges' => '${$.provider}:data.product.sku',
                'handleColorChanges' => '${$.provider}:data.product.color',
                'handleCountryChanges' => '${$.provider}:data.product.country_of_manufacture',
                'handleGenderChanges' => '${$.provider}:data.product.gender',
                'handleMaterialChanges' => '${$.provider}:data.product.material',
                'handleShortDescriptionChanges' => '${$.provider}:data.product.short_description',
                'handleSizeChanges' => '${$.provider}:data.product.size'

I understand that its purpose is to modify on the fly field values depending on other field values. For example, when adding a product, the SKU is filled in automatically from the product name value.
I also understand that this

'handleNameChanges' => '${$.provider}:data.product.name',

means that the function handleNameChanges from the import-handled.js is called and receives the parameter '${$.provider}:data.product.name'.

What I don't understand is how is this all bound together and how ${$.provider}:data.product.name is parsed.
How/where is the change event (or onkeyup or anything else) is bound to the name field?

Browse other questions tagged or ask your own question.