foreach（KnockoutJS）内のバインディングを使用して

Question

私はquestionをknockoutJSフォーラムに投稿しました。しかし、今夜まで援助を受けるかどうかはわかりません。だから私は同じ質問を掲示している：それは緊急の種類です。私はあなたの提案を待っている：

ビュー：

<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> 

0を

"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);