それぞれのボタンをクリックしてページを英語とフランス語に翻訳していますか？

Question

私は最近ノックアウトで作業を始めましたが、私はまだ学んでいます。私はEnglishを選択すると、ページ全体が英語に翻訳され、Frenchを選択すると、ページ全体がフランス語に翻訳され、すべて問題なく正常に動作するコードをドロップダウンします。私はそれがこの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> 

ここでは、ドロップダウンレイアウトをボタンのものに変更していますが、同じ翻訳が機能するはずです。ここは私のjsfiddleです。私はSettingボタンをクリックすると

は今、それは私がEnglishをクリックしてくださいので、もし私がダウンボックスの上にあるドロップでEnglishを選択し、ページ全体を翻訳する場合、それはで何が起こっているのか、まったく同じことを行う必要があるのいずれかEnglishまたはFrench緑色のタブを与えます英語と同じものにFrench同様に？私はどのように私のjsfiddleのこのボタンの事の翻訳のすべての魔法を行うドロップダウンコードの上に収まることができます。私は自分のサイトでそれが動作しているかどうかをチェックするためのテストを行うことができます。

アイデアは、上記のコード（ドロップダウン）で達成されているものと同じことをレイアウトが異なるものにすることです。英語をクリックするとすべてが英語に翻訳されます。フランス語をクリックするとすべてがフランス語に翻訳されます（上記のドロップダウンコードでは既にそのようになっています）。

更新：ノックアウトで

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

Answer 1

は、物事が起こるとき、観察の値が変化します。あなたの例では、valueバインディングは、ドロップダウンの選択に基づいて、locale.selected_localeが"en-CA"または"fr-CA"のいずれかに変更されます。代わりにボタンを使用する場合は、それに応じてオブザーバブルを変更する必要があります。ここで"en-CA"または"fr-CA"にlocale.selected_localeを変更しても、ドロップダウンと同じラベルを使用しますボタンは、以下のとおりです。

申し訳

<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>