循环遍历列表时，Knockoutjs kendoPanelBar 不起作用

Question

有谁知道我的代码发生了什么，我似乎无法让 kendoPanelBar 使用这样的代码：

<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>

但是，如果不在 foreach 循环内，面板栏工作正常。

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

希望你能帮助我。谢谢

Answer 1

你没有在最后正确关闭 container-less foreach。

查看：

<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--> /*correction here*/
</ul>

直接来自 文档：

The  and  comments act as start/end markers, defining a “virtual element” that contains the markup inside. Knockout understands this virtual element syntax and binds as if you had a real container element.

Answer 2

@super cool 抱歉回复晚了

顺便说一句，感谢您的努力。无论如何，我能够通过这样做使其工作：

  <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>

其中 $root.Room 是我的 MainVM 中的一个字段

循环遍历列表时，Knockoutjs kendoPanelBar 不起作用

Knockoutjs kendoPanelBar not working when looping through a list

knockout.js

kendo-panelbar