The HTML template for a cartridge renderer that has UI strings requiring translation will include statements similar to the following:

{{ localeNamespace + ':button.account' | i18n }}

The double-curly braces of this statement are shorthand for identifying it as a Knockout text binding (this shorthand is made possible through the use of the Knockout Punches library). The first part of the statement, localeNamespace +, identifies the RequireJS namespace for the string that needs to be rendered. The localeNamespace is set by the view model, using the value returned by the i18n-loader for the namespace, and exposed for the HTML template’s use. The next portion of the statement, ':button.account', identifies the key whose value must be returned. The combination of the two creates a fully qualified key for the UI element.

The final portion of the statement, |18n, indicates that the fully qualified key should be passed to the i18n-filter custom filter. The i18n-filter calls the i18next.t() function, passing it the fully qualified key. The t() function locates the value for the passed key in the loaded resource file and returns the correct string.