knockout.js - knockoutJS foreach 绑定循环中的单个特定项目

Question

选择中的以下 KnockoutJS foreach：

<select "foreach: ControllersAndActions">
   <optgroup data-bind="attr: {label: $data.ControllerName}, foreach: Actions">
       <option data-bind="text: $data"></option>
   </optgroup>
</select> 

以下列方式呈现选项树样式：

<optgroup label="NFC EAST">
     <option>Dallas Cowboys</option>
<optgroup>
<optgroup label="NFC NORTH">
     <option>Chicago Bears</option>
</optgroup>

我需要这样做，除了在组开始之前插入一个初始的空选项，如下所示：

<option value=""></option>
<optgroup label="NFC EAST">
     <option>Dallas Cowboys</option>
<optgroup>

每次 foreach 循环迭代时，如何注入一个未“重新渲染”的单个项目？

Answer 1

不要将foreach绑定放在select元素上，而不是添加“foreach 更深一层”（例如，使用无容器控制流语法）并手动添加空元素：

<select>
   <option value=""></option>
   <!-- ko foreach: ControllersAndActions -->
   <optgroup data-bind="attr: {label: ControllerName}, foreach: Actions">
       <option data-bind="text: $data"></option>
   </optgroup>
   <!-- /ko -->
</select> ​​​​​​​​​​​​​​​​

您可以在这个JSFiddle中看到它的实际效果。