No Magento2, o que é <script type = "text / x-magento-init">?

29

Eu sou novo no Magento2 e nossa organização acabou de obter a licença EE. Eu o instalei na minha máquina local e o modelo padrão cospe o seguinte misturado ao HMTL:

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

E chama como

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

Isso tem a ver com KnockoutJSou RequireJS? O que são essas chamadas e qual é essa nova tag de script<script type="text/x-magento-init">

TheBlackBenzKid
fonte
1
Alguns documentos adicionados presumivelmente após o envio
nevvermind

Respostas:

29

Uso geral do "tipo de script"

Ao usar <script type="....">o navegador, ele interpreta apenas o que ele sabe (como text/javascriptpor exemplo).
Qualquer outra coisa é ignorada.
Basicamente, usando um tipo personalizado, você está adicionando informações à página sem exibi-las e sem o navegador interpretá-las e, posteriormente, você pode usá-las como desejar.

Como o Magento usa isso

O Magento usa essas seções após o carregamento da página.
O código que os utiliza está localizado lib/web/mage/apply/scripts.js.
Não entendo completamente o que o arquivo mencionado acima faz, mas há um comentário dentro do arquivo que afirma isso:

/**
 * 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"}
 *          }
 *      }
 */

Conclusão / Especulação

Especulo que essa é uma maneira de definir comportamentos js diferentes para elementos diferentes na página sem a necessidade de reescrever o modelo que contém os elementos.
Você só precisa adicionar um <script type="text/x-magento-init">em um de seus modelos, incluir seu modelo na página e o magento "auto-magicamente" move o comportamento para o elemento certo.

Marius
fonte
Eu tentei remover esse script, app/design/frontend/package/template/Magento_Catalog/templates/product/view/gallery.phtmlmas sem sorte. Algum conselho sobre como remover comportamentos padrão, como ampliador de produtos e / ou galeria de produtos (fotorama para ser mais preciso)?
Janaka Dombawela
Recebi um aviso Faltando a inicialização do componente JS. Use \ "x-magento-init \" ou \ "x-magento-template \". Quando estou usando tag <script> no arquivo phtml como resolvê-lo.
Sanjay Gohil
pessoal, existe algum exemplo em tempo real de como posso usar esse parâmetro de passagem no data-mage-init? e como ele retornará resultado?
Camit1dk
9

Além do que, além do mais,

fornecedor \ magento \ magento2-base \ lib \ web \ mage \ apply \ scripts.js

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

Usando os guias abaixo

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

A sintaxe padrão é

<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>

Referindo

http://alanstorm.com/magento_2_javascript_init_scripts

http://alanstorm.com/magento_2_introducing_ui_components

O próprio Magento geralmente usa o x-magento-initmétodo para chamar um módulo RequireJS como um programa. No entanto, o poder real x-magento-inité a capacidade de criar um componente Javascript Magento.

Os componentes Magento Javascript são módulos RequireJS que retornam uma função.

Magento encontra uma text/x-magento-inittag de script com um atributo *, ele irá

1] Inicialize o módulo RequireJS especificado (Magento_Ui / js / core / app)

2] Chame a função retornada por esse módulo, passando o objeto de dados

Espero que ajude

Ankit Shah
fonte