Magento 2 novo modelo de sistema de grade


15

Venho pesquisando no novo sistema de grade de back-end do Magento na versão beta 1.0.0 do Merchant.
Antes de tudo, devo dizer que estou impressionado.
Agora você pode selecionar quais colunas visualizar, reordená-las, filtrar por atributos que não necessariamente têm uma coluna.
Mas isso não é importante.
Não entendo como a grade é renderizada.
Ao ativar as dicas de caminho do modelo, vi que a grade de produtos, por exemplo, é renderizada através do modelo app/code/Magento/Ui/view/base/ui_component/templates/listing/default.xhtmle via bloco Magento\Ui\Component\Listing.
Editei o modelo e vi algo que não entendi.

<!-- ko template: getTemplate() --><!-- /ko -->

Se eu remover essa linha (e limpar o cache, se ativado), não receberei mais uma grade.
Alguém pode explicar o que koé isso e como funciona?
Também encontro esse tipo de marcação em outros modelos. app/code/Magento/Ui/view/base/web/templates/grid/controls/columns.htmlpor exemplo.

[ATUALIZAÇÃO]
Acabei de descobrir com uma pesquisa simples (duh!) Que kose refere a isso: http://knockoutjs.com/, mas ainda preciso de algumas explicações.

Respostas:


7

Parece que o Magento 2 está usando o Knockout.js , uma estrutura MVVM que usa ligações de dados HTML (e em alguns casos comentários em HTML, como o que você encontrou) para vincular modelo e exibição.

Aqui, esse comentário é um elemento virtual, "modelo", provavelmente uma ligação personalizada do Magento (consulte: http://knockoutjs.com/documentation/custom-bindings-for-virtual-elements.html ), getTemplate()obviamente uma função JavaScript que é responsável por renderizar o (s) elemento (s) real (is).

Para entender o nocaute, siga seu tutorial interativo em knockoutjs.com, achei fácil de entender e o tutorial / documentação é realmente ótimo.


11
Obrigado. Este é um bom começo. Eu vou voltar para você sobre isso :)
Marius

Tem sido um tempo desde que eu usei nocaute, mas eu amei o quão simples e limpá-lo é, ansioso para fazer uso dele novamente em Magento 2 :)
Fabian Schmengler

11
A tendência é usar menos o phtml e mais o html, ambos estão à vista, mas o phtml está nos modelos e o material relacionado está na web. A diferença é que o phtml está vinculado a um bloco e o html possui um provedor de configuração e uma visualização do modelo js. Dê uma olhada no Checkout, que tem muitos exemplos
PartySoft
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.