Magento 2: More Remote Knockout.js Custom Tags and Attributes

In <a href="http://magento-quickies.alanstorm.com/post/147052601955/magentos-knockoutjs-templates-arent-knockoutjs“>two previous articles, we talked a bit about Magento’s remote Knockout.js template files, and their customer tags/attributes.

I’ve been doing a bit more exploring around this feature, and I’ve discovered the previous list of custom tags and attributes was incomplete. In addition to the tags and attributes listed in the “Design Problems” article, we’ve also got the following tags

<scope args="..."/>        : <!-- ko scope: ... --><!-- /ko -->
<translate args="..."/>    : <!-- ko i18n: ... --><!-- /ko -->
<repeat args="..."/>       : <!-- ko repeat: ... --><!-- /ko -->
<fastForEach args="..."/>  : <!-- ko fastForEach: ... --><!-- /ko -->
<render args="..."/>       : <!-- ko template: ... --><!-- /ko -->

The <render/> tag also has an interesting args-less form, which will automatically produce a call to getTemplate

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

Also, in addition to the attributes mentioned last time

<strong translate="..."></strong>
<strong data-bind="i18n: ..."></strong>
---
<strong range="..."></strong>
<strong data-bind="range: ..."></strong>
---
<strong keyboard="..."></strong>
<strong data-bind="keyboard: ..."></strong>
---
<strong afterRender="..."></strong>
<strong data-bind="afterRender: ..."></strong>
---
<strong autoselect="..."></strong>
<strong data-bind="autoselect: ..."></strong>
---
<strong outerClick="..."></strong>
<strong data-bind="outerClick: ..."></strong>
---
<strong collapsible="..."></strong>
<strong data-bind="collapsible: ..."></strong>
---
<strong openCollapsible="..."></strong>
<strong data-bind="openCollapsible: ..."></strong>
---
<strong closeCollapsible="..."></strong>
<strong data-bind="closeCollapsible: ..."></strong>
---
<strong toggleCollapsible="..."></strong>
<strong data-bind="toggleCollapsible: ..."></strong>
---
<strong staticChecked="..."></strong>
<strong data-bind="staticChecked: ..."></strong>
---
<strong simpleChecked="..."></strong>
<strong data-bind="simpleChecked: ..."></strong>
---
<strong simple-checked="..."></strong>
<strong data-bind="simpleChecked: ..."></strong>
---
<strong bindHtml="..."></strong>
<strong data-bind="bindHtml: ..."></strong>
---
<strong tooltip="..."></strong>
<strong data-bind="tooltip: ..."></strong>
---
<strong resizable="..."></strong>
<strong data-bind="resizable: ..."></strong>
---
<strong repeat="..."></strong>
<!-- ko repeat: ... --><strong></strong><!-- /ko -->
---
<strong outerfasteach="..."></strong>
<!-- ko fastForEach: ... --><strong></strong><!-- /ko -->
---
<strong ko-scope="..."></strong>
<strong data-bind="scope: ..."></strong>

Why we Missed Them

In Magento 2.1.x, most of these tags and attributes are setup in the following RequireJS module.

vendor/magento/module-ui/view/base/web/js/lib/knockout/template/renderer.js

In the Design Problems article we covered all the tags/attributes added here.

However, the Magento_Ui/js/lib/knockou;t/template/renderer module also has a public addNode and addAttribute method – meaning other modules can add handlers for processing new nodes or attributes.

This presents an interesting problem – while we’ve tried to document every known node and attribute – how these templates work will depend on what other modules do. It’s very possible that there’s different modules loaded in different contexts which load different sets of parsing rules. At the risk of being self-serving, this is another great reason to take advantage of Commerce Bug’s Knockout.js lookup feature.