4

In the Magento 2 documentation, they state

In Magento 2, there are two ways to initialize a JS component

However, they never really explain what a JS component is, and it's not clear from the documentation if "components" are a custom system in Magento 2, a RequireJS module, or something else.

What are the "JS Components" that programmers can initialize with the data-mage-init attribute or the text/x-magento-init script tags.

7

A JS component is a RequireJS module.

Magento will load these based on JSON given in custom script tags or data-* attributes. The crucial difference is that this module has to return a function. This function will be called with two arguments: the configuration object passed via the JSON, and the element (singular, non-jQuery object) that the component is called on. It is called once per matched element.

Edit: Is this a Magento thing?

This pattern is not specific to Magento. Instead, it comes from jQuery UI widgets. At their core, after all the configuration, they essentially boil down to a function that takes configuration as its first argument, and an element as its second. To see an example of this, look at the collapsible widget. It builds itself as a jQuery plugin, then returns the constructor at the end. If you inspect this function, you'll see the same argument order. Magento hijacked this pattern so that it can use jQuery UI.

  • Do you know if this is a stock/common javascript pattern? Or is this Magento creating a special way of using RequireJS modules? – Alan Storm Jan 26 '16 at 23:35
  • @AlanStorm See my edit, I believe it speaks to your question. – Max Bucknell Jan 26 '16 at 23:46
  • So how for example, would I 'load up' data-component="customer_form.areas". Lets say I want to iterate through all of the address form and inspect the elements. Possibly change the .value() – CarComp May 24 '16 at 13:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.