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）的工作方式是，如果我点击英文，那么整个页面将被翻译成英文，如果我点击法语，那么整个页面将以法语显示。< / p>

en-CA和fr-CA是具有英语和法语单词翻译的JS文件。

Answer 1

package a_test被绑定（如我所假设）一个可观察的options。正如您在optionsText中看到的那样：locale.selected_locale有一些负责翻译文本的i18n模块。

因此，我假设有一个代码（ko.computed）负责以反应方式更改语言环境：

i18n(item.label)

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

作为选项绑定，请查看knockout.js documentation选项绑定。基本上是：

选项中选择的值将存储在ko.computed(function(){ //pseudocode; this function will run everytime locale.selected_locale changes var lang = locale.selected_locale(); i18n.setLang(lang); });中。有两个可用选项，每个选项存储传递给i18n模块的区域设置标识符，以及标签转换的密钥标识符。所以，在locale.selected_locale文件中，＆＃34; english＆＃34;将会有＃34;英语＆＃34;的翻译，而在en-CA的同一个键下，＆＃34; Anglais＆＃34;将被存储。 fr-CA指定所选项目对象中的哪个属性存储最终将存储在optionsValue中的实际值。

knockoutjs中的options，optionsText和optionsValue

1 个答案: