在Magento2中,什么是<script type =“ text / x-magento-init”>?


29

我是Magento2的新手,我们的组织刚刚获得了EE许可证。我已经将其安装在本地计算机上,并且默认模板吐出了与HMTL混合的以下内容:

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "customer": {
                    "component": "Magento_Customer/js/view/customer"
                }
            }
        }
    }
}
</script>

<script type="text/x-magento-init">
{
"*": {
    "Magento_Ui/js/core/app": {
        "components": {
                "messages": {
                    "component": "Magento_Theme/js/view/messages"
                }
            }
        }
    }
}
</script>

这与KnockoutJS或有关RequireJS吗?这些调用是什么,这个新的脚本标签是什么<script type="text/x-magento-init">


1
大概在发布此问题后添加了一些文档:devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/…–
nevvermind

Answers:


29

“脚本类型”的一般用法

使用<script type="....">浏览器时,仅解释它所知道的内容(text/javascript例如)。
其他都将被忽略。
基本上是使用自定义类型,您是在不显示信息且浏览器不解释的情况下向页面添加信息,以后您可以根据需要使用该信息。

Magento如何使用此

页面加载后,Magento将使用这些部分。
使用它们的代码位于中lib/web/mage/apply/scripts.js
我不完全理解上面提到的文件的功能,但是文件内部有一条注释指出:

/**
 * Parses 'script' tags with a custom type attribute and moves it's data
 * to a 'data-mage-init' attribute of an element found by provided selector.
 * Note: All found script nodes will be removed from DOM.
 *
 * @returns {Array} An array of components not assigned to the specific element.
 *
 * @example Sample declaration.
 *      <script type="text/x-magento-init">
 *          {
 *              "body": {
 *                  "path/to/component": {"foo": "bar"}
 *              }
 *          }
 *      </script>
 *
 * @example Providing data without selector.
 *      {
 *          "*": {
 *              "path/to/component": {"bar": "baz"}
 *          }
 *      }
 */

结论/推测

我推测这是一种在页面中为不同元素设置不同js行为的方法,而无需重写包含这些元素的模板。
您只需要<script type="text/x-magento-init">在其中一个模板中添加一个,在页面中包含您的模板,magento就会“自动”将行为移至正确的元素。


我尝试删除此脚本,app/design/frontend/package/template/Magento_Catalog/templates/product/view/gallery.phtml但是没有运气。关于删除默认行为(例如产品放大镜和/或产品图片库(确切地说是fotorama))的任何建议?
Janaka Dombawela'3

我收到警告缺少JS组件初始化。使用\“ x-magento-init \”或\“ x-magento-template \”。当我在phtml文件中使用<script>标记时如何解决它。
Sanjay Gohil

伙计们,有没有实时示例可以说明如何在data-mage-init中使用此传递参数?以及它将如何返回结果?
Camit1dk '18

9

此外,

供应商\ magento \ magento2-base \ lib \ web \ mage \ apply \ scripts.js

var scriptSelector = 'script[type="text/x-magento-init"]',
        dataAttr = 'data-mage-init',
        virtuals = [];

通过使用以下指南

http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_init.html

标准语法是

<script type="text/x-magento-init">
{
    // components initialized on the element defined by selector
    "<element_selector>": {
        "<js_component1>": ...,
        "<js_component2>": ...
    },
    // components initialized without binding to an element
    "*": {
        "<js_component3>": ...
    }
}
</script>

通过参考

http://alanstorm.com/magento_2_javascript_init_scripts

http://alanstorm.com/magento_2_introducing_ui_components

Magento本身经常使用该x-magento-init方法将RequireJS模块作为程序来调用。但是,真正的力量x-magento-init在于能够创建Magento Javascript组件。

Magento Javascript组件是可返回函数的RequireJS模块。

Magento遇到text/x-magento-init带有*属性的脚本标签,它将

1]初始化指定的RequireJS模块(Magento_Ui / js / core / app)

2]调用该模块返回的函数,传入数据对象

希望能帮助到你

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.