-
Notifications
You must be signed in to change notification settings - Fork 1.7k
#8106 Clarify JS init component key #8609
#8106 Clarify JS init component key #8609
Conversation
Adding more information about component key in the Declarative notation section.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just one small correction
<nav data-mage-init='{"tooltip": {"content": "<?= /* @noEscape */ $content ?>"}}'></nav> | ||
``` | ||
|
||
Or a custom JS component, can be component path `Vendor_Module/js/component` or alias declareted in `requirejs-config.js`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Or a custom JS component, can be component path `Vendor_Module/js/component` or alias declareted in `requirejs-config.js`. | |
Or a custom JS component, can be component path `Vendor_Module/js/component` or alias declared in `requirejs-config.js`. |
@@ -111,6 +111,20 @@ On DOM ready, the `data-mage-init` attribute is parsed to extract component name | |||
}; | |||
``` | |||
|
|||
Where `<component_name>` native Magento JS component, for example: `menu`, `collapsible`, `tooltip` ... |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Where `<component_name>` native Magento JS component, for example: `menu`, `collapsible`, `tooltip` ... | |
Where `<component_name>` is a native Magento JS component, for example: `menu`, `collapsible`, `tooltip` ... |
<nav data-mage-init='{"tooltip": {"content": "<?= /* @noEscape */ $content ?>"}}'></nav> | ||
``` | ||
|
||
Or a custom JS component, can be component path `Vendor_Module/js/component` or alias declareted in `requirejs-config.js`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Or a custom JS component, can be component path `Vendor_Module/js/component` or alias declareted in `requirejs-config.js`. | |
Or a custom JS component, implemented with a component path: `Vendor_Module/js/component`, or as an alias declared in `requirejs-config.js`. |
If this suggestion is not accurate, than some kind of grammar fix is needed here.
<nav data-mage-init='{"Vendor_Module/js/component": {"status":"<?= /* @noEscape */ $block->getStatus(); ?>"}}'></nav> | ||
``` | ||
|
||
More about [locate JS components](https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_debug.html). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
More about [locate JS components](https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_debug.html). | |
Read more about [locate JS components](https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_debug.html). |
@BarnyShergold, @dobooth thanks for your help. I have fixed the review. |
running tests |
Hi @DenisSaltanahmedov, thank you for your contribution! |
Purpose of this pull request
This pull request adds additional examples of the "component key" related to JS data-mage-init to this topic.
Affected DevDocs pages
Links to Magento source code