Magento 2 neue Grid-System-Vorlage
-
13-12-2019 - |
Frage
Ich habe im neuen Backend-Grid-System von Magento auf der Merchant Beta 1.0.0-Version herumgestochert.
Zuallererst muss ich sagen, dass ich beeindruckt bin.
Jetzt können Sie auswählen, welche Spalten angezeigt werden sollen, Sie können sie neu anordnen und nach Attributen filtern, die nicht unbedingt eine Spalte enthalten.
Aber das ist nicht wichtig.
Ich verstehe nicht, wie das Raster gerendert wird.
Durch Aktivieren der Vorlagenpfadhinweise habe ich gesehen, dass beispielsweise das Produktraster über die Vorlage gerendert wird app/code/Magento/Ui/view/base/ui_component/templates/listing/default.xhtml
und über Block Magento\Ui\Component\Listing
.
Ich habe die Vorlage bearbeitet und etwas gesehen, das ich nicht verstehe.
<!-- ko template: getTemplate() --><!-- /ko -->
Wenn ich diese Zeile entferne (und den Cache lösche, falls aktiviert), erhalte ich kein Raster mehr.
Kann jemand erklären, was das ist ko
ist und wie es funktioniert?.
Ich finde diese Art von Markup auch in anderen Vorlagen. app/code/Magento/Ui/view/base/web/templates/grid/controls/columns.html
beispielsweise.
[UPDATE]
Ich habe es gerade mit einer einfachen Suche herausgefunden (duh!) dass ko
bezieht sich auf diese: http://knockoutjs.com/ aber ich brauche noch einige Erklärungen.
Lösung
Das sieht so aus, als würde Magento 2 verwendet Knockout.js, ein MVVM-Framework, das HTML-Datenbindungen (und in einigen Fällen HTML-Kommentare, wie die, die Sie gefunden haben) verwendet, um Modell und Ansicht zu verknüpfen.
Hier ist dieser Kommentar ein virtuelles Element, "Vorlage" wahrscheinlich eine benutzerdefinierte Bindung von Magento (siehe: http://knockoutjs.com/documentation/custom-bindings-for-virtual-elements.html), getTemplate()
offensichtlich eine JavaScript-Funktion, die für das Rendern der realen Elemente verantwortlich ist.
Um Knockout zu verstehen, lesen Sie das interaktive Tutorial unter knockoutjs.com , Ich fand es leicht zu verstehen und das Tutorial / die Dokumentation ist wirklich großartig.