Translating in html templates using i18n

Question

I'm using i18n to translate some values in html static templates (default.html):

So this does not work:

<!-- ko if: (!Array.isArray(option.value) && option.option_type != 'file') -->
    <span data-bind="i18n: option.value"></span>
<!-- /ko -->

But if I add the translation to all the "option.value" possible values, the "option.value" is correctly translated:

<!-- ko if: (!Array.isArray(option.value) && option.option_type != 'file') -->
    <span style="display: none;" data-bind="i18n: 'Value 1'"></span>
    <span style="display: none;" data-bind="i18n: 'Value 2'"></span>
    <span style="display: none;" data-bind="i18n: 'Value 3'"></span>
    <span data-bind="i18n: option.value"></span>
<!-- /ko -->

If the option value is on of the values ("Value 1", "Value 2" and "Value 3") it is correctly translated. Help please !!!! :)

Answer 1

You might have to do something like this

https://github.com/magento/magento2/blob/9544fb243d5848a497d4ea7b88e08609376ac39e/app/code/Magento/Theme/view/frontend/templates/html/header.phtml#L16

So something like this

data-bind="text: new String('Translate: %1!', '%1').replace('%1', option.value)">