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>

如何注射一个没有重新渲染的单个物品＆＃34;每次foreach循环迭代？

Answer 1

不要将foreach绑定放在select元素上，而不是添加“foreach one level”（例如使用containerless control flow syntax）并手动添加空元素：

<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中看到它的实际效果。