2

Мне интересно, как работают данные привязки, параметры, optionsText и optionsValue?опции, optionsText и optionsValue in knockoutjs

<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 от инспектировать элемента Google Хрома (Перевод английского и французского языков слов займет место щелкать на английском и французском языках в самом сайте) для выше кода.

В реальном сайте она (Fiddle) работает таким образом, что, если я нажму на английском языке, то вся страница переводится на английском языке и если я нажимаю на французском языке, то вся страница отображаются на французском языке.

ru-CA и fr-CA - это файлы JS, имеющие перевод английских и французских слов.

ответ

0

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 под «английским» будет переведен перевод «Английский», тогда как в fr-CA под тем же ключом будет храниться «Англи». optionsValue указывает, какое свойство в выбранном объекте объекта хранит фактическое значение, которое в конечном итоге будет сохранено в locale.selected_locale.

+0

Да, я могу видеть 'locale.selected_locale()' в некоторых файлах javascript. Поскольку это мой первый раз, работая с нокаутом, так что некоторые путаницы. Я пытался понять все это, я хотел сделать несколько разные основы. –

+0

Я создал jsfiddle [здесь] (http://jsfiddle.net/9x1rpz2b/3/). Теперь, если я нажимаю кнопку 'Setting', это дает либо« английский », либо« французский », поэтому, если я нажму« английский », он должен делать то же самое, что происходит, если я выберу« английский »в этом раскрывающемся списке в вышеупомянутый код и то же самое с 'French'? Как я могу это достичь? Идея заключается в том, чтобы делать то же самое, что достигается в вышеуказанном коде (через раскрывающийся список), но с разной компоновкой. Нажав на английский, вы переводите все на английский, нажав на французский, переведите все на французский (как это уже делает код). –

+0

Единственное замешательство, которое у меня есть, - это то, как поместить выпадающий код, который действительно выполняет перевод в мой код jsfiddle, чтобы я мог проверить его на своем веб-сайте с помощью нового макета. Любая помощь будет оценена. –

Смежные вопросы