How i18n works in Javascript?

Question

I just need some information on the below code.

<span class="label"><a href="#home" class="link"><img src="img/homeicon.png" alt="homeicon"><!-- ko i18n:'home' --><!-- /ko --></a></span>

After inspecting the same code on the webpage it shows like this:

<span class="label"><a href="#home" class="link"><img src="img/homeicon.png" alt="homeicon"><!-- ko i18n:'home' -->Home<!-- /ko --></a></span>

The only difference is that after inspecting it is showing Home in between and I have a question, why the below commented parts from the above code are still working ? Although, they are commented.

1. <!-- ko i18n:'home' -->

2. <!-- /ko -->

In the JavaScript file, the home in small caps is written like this: "home": "Home"

Any changes made in "Home" will directly effect the code displayed after inspection.

Answer 1

It's referencing the string "Home" via the id in the comment, in this case 'home'.

If you go into the JS file and change it to: "home":"House" I'm guessing you'll see the rendered text change to House .

Looks like Knockout is parsing the page looking for the "ko i18n" comments and then inserting the proper text from the JS file.