使用如果綁定裏面foreach（KnockoutJS）

我已經發布我的question knockoutJS論壇。但我不確定在今晚之前我能否獲得幫助。所以我發佈了同樣的問題：它有點緊迫;我等待着您的建議：使用如果綁定裏面foreach（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>

因此，考慮到「結果」和「預期結果」之間的差異我做錯了什麼？即使我給靜態值「綁定」，如「」它是綁定。

來源

2012-03-28 rebulanyum

您使用的是什麼瀏覽器？這裏是你的代碼在一個小提琴：http://jsfiddle.net/jearles/9PmGj/。它適用於我使用Safari。在工作中，我們最近不得不從無菌容器綁定切換到IE 7和IE 8的兼容性。 – 2012-03-28 10:03:06

我正在使用IE 7.我應該怎麼做？「無容器綁定」是指jQuery.tmpl？ – rebulanyum 2012-03-28 10:38:02

無容器綁定是內置於淘汰2.0的模板的一部分，並替換了不再開發的jQuery.tmpl。有關更多詳細信息，請參閱http://knockoutjs.com/documentation/template-binding.html。 – 2012-03-28 11:25:37

我已經解決了這個問題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鏈接。

來源

2012-03-29 22:50:21 rebulanyum

與混合版本：選項和集團只有集團擁有產權的孩子，如果有物業 - 組，如果沒有則選擇

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

來源

2012-08-14 05:43:18

使用如果綁定裏面foreach（KnockoutJS）

回答

相關問題