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

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 循环迭代时注入(inject)一个不“重新渲染”的单个项目？

Answer 1

不要将 foreach 绑定(bind)放在 select 元素上，而是添加“foreach 更深一层”(例如使用 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 中看到它的实际效果。 .