options、optionsTextとoptionsValue in knockoutjs

Question

データバインド、オプション、optionsTextとoptionsValueがここでどのように働いているのですか？ここで

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

は、上記のコード （英語とフランス語の単語の翻訳は、実際のウェブサイトに英語とフランス語をクリックの上 場所を取る）グーグル Chromeの検査要素からFiddleです。実際のウェブサイトのそれで

（Fiddleは）私は英語をクリックしたならば、ページ全体が英語に翻訳さとフランスに私をクリックした場合、その後、全体のページがフランス語で表示されているような方法で取り組んでいます。

en-CAとfr-CAは、英語とフランス語の単語の翻訳を持つJSファイルです。

Answer 1

optionsは、観察可能なlocale.selected_localeに（私が推測するように）結合する。 optionsText：i18n(item.label)にあるように、テキストを翻訳するための何らかの種類のi18nモジュールがあります。

はしたがって、私は、次のような反応性のロケールを変更する責任コード（ko.computed）があると仮定します。

ko.computed(function(){ 
    //pseudocode; this function will run everytime locale.selected_locale changes 
    var lang = locale.selected_locale(); 
    i18n.setLang(lang); 
}); 

私は、これは何が起こっているかを理解するために役立ちます願っていますが、翻訳がどのように動作することができますそのサイトで調査した

オプションバインディングに関しては、オプションバインディングについてはknockout.js documentationを参照してください。基本的に：

オプションで選択された値は、locale.selected_localeに格納されます。使用可能なオプションは2つあり、それぞれがi18nモジュールに渡されるロケール識別子とラベル変換のキー識別子を格納します。したがって、en-CAファイルでは、 "英語"の下に "英語"の翻訳がありますが、同じキーの下のfr-CAには "英語"が格納されます。 optionsValueは、最終的にlocale.selected_localeに格納される実際の値を選択したアイテムオブジェクトのどのプロパティに格納するかを指定します。