15

I've been poking around in the new backend grid system of Magento on the Merchant beta 1.0.0 version.
First of all I must say I'm impressed.
Now you can select what columns to see, you can reorder them, you can filter by attributes that don't necessarily have a column.
But that's not important.
I don't understand how the grid is rendered.
By enabling the template path hints I saw that the products grid for example is rendered via the template app/code/Magento/Ui/view/base/ui_component/templates/listing/default.xhtml and via block Magento\Ui\Component\Listing.
I edited the template and saw something I don't understand.

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

If I remove this line (and clear the cache if enabled) I don't get a grid anymore.
Can someone explain what this ko is and how it works?.
I also find this kind of markup in other templates. app/code/Magento/Ui/view/base/web/templates/grid/controls/columns.html for example.

[UPDATE]
I just found out with a simple search (duh!) that ko refers to this: http://knockoutjs.com/ but I still need some explanations.

7

That looks like Magento 2 is using Knockout.js, a MVVM framework that uses HTML data bindings (and in some cases HTML comments, like the one you found) to link model and view.

Here, this comment is a virtual element, "template" probably a custom binding from Magento (see: http://knockoutjs.com/documentation/custom-bindings-for-virtual-elements.html), getTemplate() obviously a JavaScript function that is responsible to render the real element(s).

To understand knockout, go through their interactive tutorial at knockoutjs.com, I found it easy to grasp and the tutorial/documentation is really great.

  • 1
    Thanks. This is a good start. I'll get back to you on this :) – Marius Jul 16 '15 at 15:44
  • It's been a while since I used knockout, but I loved how simple and clean it is, looking forward to make use of it again in Magento 2 :) – Fabian Schmengler Jul 16 '15 at 15:46
  • 1
    The trend is to less use phtml and more use html, both are in view but phtml is in templates and ko related stuff is in web. The difference is that phtml is bound to a block and html has a config provider and a js model view. Take a look at the Checkout, it has lots of examples – PartySoft Jul 17 '15 at 14:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.