optgroup을 knockout.js와 함께 사용하십시오.

Question

저는 knockout.js의 optgroups 안의 옵션을 Ryan Niemeyer의 답변 here의 지침과 함께 수동으로 렌더링하려고합니다. 그것은 잘 작동하지만 옵션이 즉시 렌더링되는 경우에만 작동합니다. 이후에로드되면 올바른 항목이 선택되지 않습니다.

코드와 피들 링크는 다음과 같습니다.

t: ko.observable(t) 

에

t: ko.observable(null) 

을 변경하면 작동한다, 그래서 문제는 확실히 지연로드, 나는 valueAllowUnset true로 설정해야합니다.

바이올린 : http://jsfiddle.net/exyy7hq2/3/

HTML

<select data-bind="template: { name: 'selectTemplateType', data: t }, valueAllowUnset: true, value: selectedId"></select> 
<div data-bind='text: selectedId'></div> 

<script type="text/html" id="selectTemplateType"> 
    <!-- ko ifnot: $data --> 
     <option>No template selected</option> 
    <!-- /ko --> 
    <!-- ko if: $data --> 
     <option>Select</option> 
     <!-- ko foreach: groups --> 
      <optgroup data-bind="attr: { 'label': name }, foreach: types"> 
       <option data-bind="option: id, text: name"></option> 
      </optgroup> 
     <!-- /ko --> 
    <!-- /ko --> 
</script> 

자바 스크립트

ko.bindingHandlers.option = { 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     ko.selectExtensions.writeValue(element, value); 
    }   
}; 

var t = { 
    groups: [ 
     { name: 'a', types: [{id: 1, name: 't1'}] }, 
     { name: 'b', types: [{id: 102, name: 't2'}, {id: 103, name: 't3'}] }, 
     { name: 'c', types: [{id: 5, name: 'x'}] } 
    ] 
} 
var vm = { 
    t: ko.observable(null), 
    selectedId: ko.observable(103) 
}; 
ko.applyBindings(vm); 
setTimeout(function(){ vm.t(t); }, 2000); 

Answer 1

당신은 넉 아웃은 단순히 때 동적으로 일을 조정하는 방법이 없습니다, 바인딩 옵션을 사용하지 않는 경우 보인다 valueAllowUnset이 true로 설정된 경우에도 새 옵션을 생성하므로 내 방식이 간단히 작동하지 않습니다. 바인딩 할 때 정확한 옵션이 있어야합니다. 이를 달성하기위한 좋은 방법 중 하나는 select을 값이 존재하는 경우에만 렌더링하는 것입니다 (또한 옵션 사용자 정의 바인딩이 필요하지 않으며 옵션 요소에 대한 일반적인 바인딩입니다).

http://jsfiddle.net/exyy7hq2/11/

<!-- ko if: t --> 
<select data-bind="template: { name: 'selectTemplateType', data: t }, value: selectedId"></select> 
<!-- /ko --> 
<!-- ko ifnot: t --> 
<select> 
    <option>No templates loaded</option> 
</select> 
<!-- /ko --> 
<div data-bind='text: selectedId'></div> 

<script type="text/html" id="selectTemplateType"> 
    <option>Select</option> 
    <!-- ko foreach: groups --> 
     <optgroup data-bind="attr: { 'label': name }, foreach: types"> 
      <option data-bind="value: id, text: name"></option> 
     </optgroup> 
    <!-- /ko --> 
</script>