0

I recently started working with knockout and I am still learning. I have a below drop down code in which if I select English, it translates whole page into English and if I select French it translates whole page into French and everything works fine without any issues. I am assuming it has to do something with this return i18n(item.label).

<div class="header dropdown">
 <select data-bind=" value: locale.selected_locale,
   options: [{ value: 'en-CA', label: 'english'}, { value: 'fr-CA',label: 'french'}],
   optionsText: function (item) {return i18n(item.label);},
   optionsValue: 'value' "  class="auto">
 </select>
</div>

Now I am changing the drop down layout to a button thing but still same translation thing should work. Here is my jsfiddle.

Now If I click on Setting button, it gives either English or French green tab so if I click on English it should do exactly same thing what is happening with if I select English in the above drop down box and translates whole page into English and same thing French as well? How can I fit above drop down code which does all the magic of translation in this button thing in my jsfiddle. I can do testing on my site to check it out whether it is working or not.

Idea is to do same thing what is being achieved in the above code (through dropdown) but with different layout. Clicking on english will translate everything to english, clicking on french will translate everything to french(as the above drop down code is already doing that).

Update:

<div class="header dropdown">   
    <button type="button" data-bind="text: i18n('french '), click: function(){locale.selected_locale('fr-CA')}"></button>
</div>

1 Answers1

0

In Knockout, things happen when the value of an observable changes. In your example, the value binding will change the locale.selected_locale observable to either "en-CA" or "fr-CA" based on the selection of the drop-down. If you want to use buttons instead, they need to change that observable accordingly. Here are buttons that will change locale.selected_locale to "en-CA" or "fr-CA" and also uses the same label as the drop-down:

<div class="header dropdown">   
    <button type="button" data-bind="text: i18n('french '), click: function(){locale.selected_locale('fr-CA')}, visible: locale.selected_locale() == 'en-CA'"></button>
    <button type="button" data-bind="text: i18n('english'), click: function(){locale.selected_locale('en-CA')}, visible: locale.selected_locale() == 'fr-CA'"></button>
</div>
Michael Best
  • 16,623
  • 1
  • 37
  • 70
  • Sorry I was away for a while. I think I get an idea but still little bit confuse.. Did you see my jsfiddle? I want to do this based on my jsfiddle example. If I click settings image, then it will open a tab right? And then if I click English it should do exactly what my above drop down code did, changing the whole page into english and same with french as well. Do you think it is possible? –  Dec 13 '16 at 19:40
  • 1
    If you search through your code, you should find something that reacts to `locale.selected_locale` and changes the language on the page. Thus setting that observable using a button will work just as well. – Michael Best Dec 13 '16 at 20:10
  • ohhh so that means we cannot just change things as it is in my jsfiddle to make it work? It has to be done through some other place where `locale.selected_locale` is being used? –  Dec 13 '16 at 22:09
  • 1
    If you show me a jsfiddle with the original code working (using the drop-down), I can show you how to make it work with a button instead. But I'm quite sure the code I've provided in my answer is correct. – Michael Best Dec 14 '16 at 02:45
  • You mean working example where I select either of the language from the drop down and page is getting translated? That will be hard because there are lot of code which I am not sure how can I put it in jsfiddle. I am still new to all these things and still learning. –  Dec 15 '16 at 22:05
  • I tried your button example that you gave me in your answer and it worked. I have updated my question with the code I tried with `French` and it worked. Basically I removed everything inside my above div in the question and I copied your button example in between my div but with `French` not `English` and when I clicked it worked, it translated the whole page into `French`. Now I want to translate that page back to `English`? –  Dec 15 '16 at 22:06
  • So my question is - Is there any way to do this in the same button example? I mean once I click the button `French`, it will translate the whole page into `French` as it did and at the same time button text (may be if this is the right way) should change to `English` and now if I click the `English` button, it should translate whole page into `English`. By default page is already in `English` so button text should show as `French` and when I click `French`, button text will become `English` and also translate the whole page into french. –  Dec 15 '16 at 22:07
  • 1
    I've expanded my answer to include two buttons with a visible binding that will show only the needed one. If this works for you, please accept the answer. – Michael Best Dec 15 '16 at 22:23
  • I tried your answer, it worked. I have one other question, I hope its not outside the scope of this question. I have a fiddle https://jsfiddle.net/9x1rpz2b/7/ (enable No wrap in body), it is working in a way that if I click on English the whole page gets translated in English and if I click on French, the whole page gets translated in French but unfortunately at this moment no translation is taking place, only the change of text from English to French and French to English are taking place. –  Dec 16 '16 at 14:49
  • Is is possible if I fit this 2 button code which you have provided me above somewhere in this fiddle in order for the translation to go through properly ? –  Dec 16 '16 at 14:49
  • I've answered your question. There's no magic for translation. See http://stackoverflow.com/questions/3084675/how-does-internationalization-work-in-javascript – Michael Best Dec 16 '16 at 20:47