knockout.js - 循环遍历列表时，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-lessforeach 。

看法：

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

直接来自 文档：

<!-- ko --> and <!-- /ko -->注释充当开始/结束标记，定义包含内部标记的“虚拟元素” 。Knockout 理解这种虚拟元素语法并像拥有一个真正的容器元素一样进行绑定。

Answer 2

@supercool 抱歉回复晚了

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

  <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 中的一个字段