javascript - knockoutjs 中的选项、optionsText 和 optionsValue

Question

我想知道数据绑定(bind)、选项、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>

Here is the Fiddle from google Chrome's inspect element (Translation of english and french words take place on clicking English and French in the actual website) for the above code.

在实际网站中，它 ( Fiddle ) 的工作方式是，如果我点击英语，那么整个页面都会翻译成英语，如果我点击法语，那么整个页面都会以法语显示。

en-CA 和 fr-CA 是翻译了英文和法文的 JS 文件。

Answer 1

选项 绑定(bind)到(正如我推测的那样)一个可观察的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); 
});

我希望这有助于了解正在发生的事情，以及翻译如何在您调查的那个网站上工作。

关于选项绑定(bind)，查看 knockout.js documentation用于选项绑定(bind)。基本上:

选项中选择的值将存储在 locale.selected_locale 中。有两个可用选项，每个选项都存储传递给 i18n 模块的区域设置标识符，以及标签翻译的关键标识符。因此，在 en-CA 文件中，“english”下会有“English”的翻译，而在 fr-CA 中，在相同的键下，“Anglais”将被存储。 optionsValue 指定所选项目对象中的哪个属性存储最终将存储在 locale.selected_locale 中的实际值。