Как добавить код JavaScript в шаблон *.phtml правильным способом (x-magento-init)

Программирование
, ,
1

Обычный в таких случаях способ состоит в добавлении тега <script type="text/javascript">, однако в случае Magento 2 такой способ не рекомендуется, потому что в таком случае Ваш код JavaScript будет вызван в не то время, раньше, чем система инициализируется.
Magento 2 содержит много сложного кода JavaScript, и порой недостаточно просто подождать окончания формирования DOM для выполнения своего кода.
В частности, у меня были проблемы с библиотекой SimpleMDE (это редактор Markdown, реализованный на JavaScript): он не инициализировался нужным образом.

Поэтому безопасней и разумней использовать для вставки JavaScript официально рекомендуемый способ: синтаксис x-magento-init.

Пример:

<script type="text/x-magento-init">
	{"*": {"Dfe_Markdown/main": {}}}
</script>

Выражение Dfe_Markdown/main ссылается на файл JavaScript по пути Dfe/Markdown/view/<область кода>/web/main.js.
Пример такого файла:

require([
	'jquery', 'SimpleMDE', 'HighlightJs'
], function($, SimpleMDE, HighlightJs) {$(function() {
	// Your custom code here...
});});