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

Question

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

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

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

Хороший способ добраться до того, что вы хотите, - создать шаблон для привязки. Подробнее о шаблонах вы можете узнать по адресу the knockout documentation page for the template binding. Вот пример с languageselector:

Шаблон 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/.