Knockoutjs kendoPanelBar not working when looping through a list

Does anyone know what's happening with my code wherein I can't seem to get kendoPanelBar working with a code like this:

<ul data-bind="kendoPanelBar:{}">
  <!--ko foreach: Students -->
  <li>James
     <ul>
       <li data-bind="text: Age">Age: 25</li>
       <li data-bind="text: Score">Score: 9/10</li>
     </ul>
  </li>
  <!-- /ko -->
</ul>

but, if not inside the foreach loop the panelbar is working fine.

<ul data-bind="kendoPanelBar:{}">
  <li>James
     <ul>
       <li>Age: 25</li>
       <li>Score: 9/10</li>
     </ul>
  </li>
</ul>

Hopefully you can help me. Thanks.

@super cool sorry for late response

By the way thanks for your effort. Anyway I was able to make it work by doing like this:

  <div data-bind="with: $root.Room">
  <ul data-bind="kendoPanelBar:{}">
  <!--ko foreach: Students -->
   <li>James
      <ul>
        <li data-bind="text: Age">Age: 25</li>
        <li data-bind="text: Score">Score: 9/10</li>
      </ul>
   </li>
   <!-- /ko -->
 </ul>
 </div>

wherein $root.Room is a field in my MainVM