How to translate Knockout templates?

Localization
, ,
1

Magento 2 uses Knockout JavaScript framework.
Knockout template is a file with .html extension, for example: https://github.com/magento/magento2/blob/develop/app/code/Magento/Ui/view/base/web/templates/grid/controls/columns.html

To make the strings translatable use data-bind attribute with i18n binding handler, for example:

<span class="admin__action-dropdown-text" data-bind="i18n: 'Columns'"></span>

https://github.com/magento/magento2/blob/develop/app/code/Magento/Ui/view/base/web/templates/grid/controls/columns.html#L14

There is an official documentation for this functionality: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/translations/translate_theory.html#add_strings_ui_html

2

If you need to translate HTML text outside of HTML element you can do it using the comment syntax:

<!-- ko i18n: 'You have no items in your shopping cart.' --><!-- /ko -->

Magento will add this string and its translation to the js-translation.json file.

See the documentation: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/translations/translate_theory.html#add_strings_ui_html1

3

See also