使用如果绑定里面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）

回答

相关问题