Нокаут: элемент не отображается должным образом при использовании «если» связывания

Question

У меня есть этот кусок кода (последняя версия ко):

<tbody> 
       <!-- ko foreach: searchResults--> 
       <tr> 
        <td><span class="capbType" data-bind="text: type"></span> (<span data-bind="text: data.length"></span>)</td> 
        <td class="capbEntities"> 
         <!-- ko foreach: data --> 
         <p data-bind="text: name"></p> 

         //THIS IS NOT RENDERING 
         <!-- ko if: $index == 3 --> 
         <span class="capbShowMore capbIcon capbIconExpand" data-bind="visible: data.length > 3,click: $root.toggleShow"><span data-bind="text: data.length - 3"></span> More</span> 
         <!-- /ko --> 

         <!-- /ko --> 
        </td> 
        <td class="capbMoreInfo"> 
         <!-- ko foreach: data --> 
         <p data-bind="text: strategyName"></p> 
         <!--/ko--> 
        </td> 
       </tr> 
       <!--/ko--> 
      </tbody> 

Я просто хочу, чтобы сделать capbShowMore элемент один раз, когда индекс 3 но какой-то причине все отрисовывается за capbShowMore элемента, за исключением, так что я получаю это:

<td class="capbEntities"> 
         <!-- ko foreach: data --> 
         <p data-bind="text: name">FY13 SPM Strategy</p> 
         <!-- ko if:$index == 3 --><!-- /ko --> 

         <p data-bind="text: name">FY13 SPM Strategy</p> 
         <!-- ko if: $index == 3 --><!-- /ko --> 

         <p data-bind="text: name">FY11 Corporate Strategy</p> 
         <!-- ko if: $index == 3 --><!-- /ko --> 

         <p data-bind="text: name" style="display: none;">Service &amp; Portfolio Management</p> 
         <!-- ko if: $index == 3 --><!-- /ko --> 

         <p data-bind="text: name" style="display: none;">Strategy1</p> 
         <!-- ko if: $index == 3 --><!-- /ko --> 

         <p data-bind="text: name" style="display: none;">Strategy1</p> 
         <!-- ko if: $index == 3 --><!-- /ko --> 

         <p data-bind="text: name" style="display: none;">Update Admin Users - default</p> 
         <!-- ko if: $data.$index == 3 --><!-- /ko --> 

         <p data-bind="text: name" style="display: none;">Update Admin Users - Duplicates</p> 
         <!-- ko if: $index == 3 --><!-- /ko --> 

         <p data-bind="text: name" style="display: none;">Update Admin Users - Assignee is NULL</p> 
         <!-- ko if: $index == 3 --><!-- /ko --> 
         <!-- /ko --> 
        </td> 

Что я делаю неправильно?

Answer 1

От documentation:

В отличие от других связывающих свойств контекста, $index является наблюдаемой.

Для того, чтобы получить его значение, вы должны потушить (), если используете его внутри выражения.

Так должно работать:

<!-- ko if: $index() == 3 --> 
<!-- /ko -->