knockoutjs 中的 options、optionsText 和 optionsValue

Question

我想知道 data-bind、options、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>

这是来自谷歌的Fiddle Chrome 的检查元素（英语和法语单词的翻译） 在实际网站中点击英文和法文） 以上代码。

在实际网站中，它 (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。有两个可用选项，每个选项都存储传递给 i18n 模块的语言环境标识符，以及用于标签转换的键标识符。因此，在en-CA 文件中，“english” 下将有“English”的翻译，而在fr-CA 相同键下，将存储“Anglais”。 optionsValue 指定所选项目对象中的哪个属性正在存储最终将存储在 locale.selected_locale 中的实际值。