foreach (KnockoutJS)에 바인딩하는 경우 사용

Question

knockoutJS 포럼에 question을 게시했습니다. 그러나 나는 오늘 밤까지 내가 도움을받을 지 확신이 없다. 그래서 나는 같은 질문을 올리고있다 : 그리고 그것은 긴급한 일이다; 난 당신의 제안을 기다리고 :

보기 :

<select data-bind="foreach: groups"> 
    <!-- ko if: false --> 
    <optgroup data-bind="attr: {label: label}, foreach: children"> 
     <option data-bind="text: label"></option> 
    </optgroup> 
    <!-- /ko --> 
    <!-- ko ifnot: false --> 
    <option data-bind="text: label"></option> 
    <!-- /ko --> 
</select> 

JS :

function Group(label, children) { 
    this.label = ko.observable(label); 
    this.children = ko.observableArray(children); 
} 

function Option(label) { 
    this.label = ko.observable(label); 
} 

var viewModel = { 
    groups: ko.observableArray([ 
     new Group("Option All", null), 
     new Group("Group 1", [ 
      new Option("Option 1"), 
      new Option("Option 2"), 
      new Option("Option 3") 
      ]), 
     new Group("Group 2", [ 
      new Option("Option 4"), 
      new Option("Option 5"), 
      new Option("Option 6") 
      ]), 
     new Group("Group 3", [ 
      new Option("Option 7"), 
      new Option("Option 8"), 
      new Option("Option 9") 
      ]) 
    ]) 

}; 


ko.applyBindings(viewModel); 

결과 :

<select> 
    <optGroup>Option All</optGroup> 
    <option>Option All</option> 
    <optGroup label="Group 1"> 
     <option>Option 1</option> 
     <option>Option 2</option> 
     <option>Option 3</option> 
    </optGroup> 
    <option>Group 1</option> 
    <optGroup label="Group 2"> 
     <option>Option 4</option> 
     <option>Option 5</option> 
     <option>Option 6</option> 
    </optGroup> 
    <option>Group 2</option> 
    <optGroup label="Group 3"> 
     <option>Option 7</option> 
     <option>Option 8</option> 
     <option>Option 9</option> 
    </optGroup> 
    <option>Group 3</option> 
</select> 

예상 결과 :

<select> 
    <option>Option All</option> 
    <optGroup label="Group 1"> 
     <option>Option 1</option> 
     <option>Option 2</option> 
     <option>Option 3</option> 
    </optGroup> 
    <optGroup label="Group 2"> 
     <option>Option 4</option> 
     <option>Option 5</option> 
     <option>Option 6</option> 
    </optGroup> 
    <optGroup label="Group 3"> 
     <option>Option 7</option> 
     <option>Option 8</option> 
     <option>Option 9</option> 
    </optGroup> 
</select> 

"Result"와 "Expected Result"의 차이를 고려하여 내가 뭘 잘못하고있는 걸까요? 심지어 정적 값을 "if"바인딩에 부여합니다. "<!-- ko if: false -->"바인딩입니다.

Answer 1

나는 jquery.tmpl와 함께 문제를 해결했습니다

<select multiple="multiple"> 
     {{each selectItems}} 
      {{if items}} 
       <optgroup label="${text}"> 
       {{each items}} 
        <option value="${value}">${text}</option> 
       {{/each}} 
       </optgroup> 
      {{else}} 
       <option value="${value}">${text}</option> 
      {{/if}} 
     {{/each}} 
     </select> 

그리고 KnockoutJS의 문제를 해결했습니다 : 나는 그것을 사용자 정의 기능을 추가했습니다. this 링크를 참조하십시오.

Answer 2

믹스와 함께 버전 : 옵션 및 그룹 만 재산이있는 경우 그룹, 재산 자식이 - 경우 그룹을하지 다음 옵션은 사용하는 어떤 브라우저

<select data-bind="foreach: groups"> 
<!-- ko if: $data.hasOwnProperty('children') --> 
<optgroup data-bind="attr: {label: label}, foreach: children"> 
    <option data-bind="text: label"></option> 
</optgroup> 
<!-- /ko --> 
<!-- ko ifnot: $data.hasOwnProperty('children') --> 
<option data-bind="text: label"></option> 
<!-- /ko --></select> 

function Group(label, children) { 
this.label = ko.observable(label); 
this.children = ko.observableArray(children);} 


function Option(label) { 
this.label = ko.observable(label);} 


var viewModel = { 
groups: ko.observableArray([ 
    new Option("Option All"), 
    new Group("Option All", [{"label": "Option without object"}]), 
    {"label":"OptionGroup Test", "children":[{"label":"label_1"},{"label":"lebel_2"}]}, 
    new Group("Group 1", [ 
     new Option("Option 1"), 
     new Option("Option 2"), 
     new Option("Option 3") 
     ]), 
    new Option("Option only"), 
    new Group("Group 2", [ 
     new Option("Option 4"), 
     new Option("Option 5"), 
     new Option("Option 6") 
     ]), 
    new Group("Group 3", [ 
     new Option("Option 7"), 
     new Option("Option 8"), 
     new Option("Option 9") 
     ]) 
])}; 
ko.applyBindings(viewModel);