Пользовательская привязка с выбором

Question

Я пытаюсь реализовать пользовательские привязки в нокауте, чтобы создать элемент выбора. Единственное отличие, почему я не использую привязку select - это то, что мой выбор всегда будет одинаковым.

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

ko.bindingHandlers.langSelect = {
    init: function(element, valueAccessor){
        var langCur = ko.utils.unwrapObservable(valueAccessor());
        ko.utils.domNodeDisposal.addDisposeCallback(element, function (){
            $(element).remove();
        });

        var list = '', lang = ['en', 'de', 'ja'], i, l = lang.length, s ='';
        for (i = 0; i < l; i++){
            s = (lang[i] === langCur ) ? 'selected' : '';
            list += '<option value="'+ lang[i] +'"'+ s +'>'+ lang[i] +'</option>';
        }

        $(element).html(list);
    },
    update: function(element, valueAccessor){

    }
}

Кто-нибудь может мне с этим помочь? Если пользовательская привязка не лучший вариант, я не против изменить ее.

Answer 1

Хороший способ получить то, что вы хотите, это создать шаблон для привязки. Вы можете прочитать больше о шаблонах на странице документации нокаута для привязки шаблона. Вот пример с вашим языком выбора:

Шаблон HTML:

<script type="text/html" id="languageSelectorTemplate">
    <select data-bind="options: ['en','de','ja'], value: selectedLanguage"></select>
</script>

JS:

function AppViewModel() {
    this.lang = ko.observable("de");
}

ko.applyBindings(new AppViewModel());

Пример использования шаблона:

<div data-bind="template: {name: 'languageSelectorTemplate', data: { selectedLanguage: lang } }"></div>

Вы можете найти приведенный выше пример на http://jsfiddle.net/8a9JB/2/.