杜兰达小工具：淘汰赛“ <!— ko if: --> “异常

Question

我遇到了一些奇怪的事情。 （至少对我来说）并且不确定在这种情况下纠正这个问题的最佳途径是如何使用小部件，并且在没有数据的情况下不会实际渲染我的标记

  <div data-bind="visible: menuItems().length > 0">
       greater
  </div>

  <div data-bind="visible: menuItems().length == 0">
       equal
  </div>

  <!-- ko if: menuItems().length == 0 -->
  <form role="form">
       <fieldset>
          <legend>Members</legend>
           //teh form markup
       </fieldset>
  </form>
  <!-- /ko -->
  <!-- ko if: menuItems().length > 0 -->
   <h2 data-bind="text: settings.header"></h2>
   <ul data-bind="foreach: menuItems()">
      <li>
       <a href='#' data-bind='click: $data.itemClick, text: $data.name'></a>
      </li>
   </ul>
  <!-- /ko -->

图A

在这种情况下，我的菜单项计数为0.但是包含代码部分的if语句仍然呈现。 EG标题和ul （图A）

如果我通过chrome检查代码。 我可以看到“ <!-- ko if: menuItems().length == 0 --> ”缺失....（图B）这解释了为什么包含内容仍然存在...我的假设是那个“ <!-- you get the idea --> ”被某种方式排除在外。

这可能与标记如何呈现等有关吗？

在窗口小部件绑定/ DOM创建过程中是否会将注释的代码段排除？ 因此我的标题和ul呈现，（集合是空的，等于空的ul）...在这种情况下两者都不应该存在...

图B.

当我将菜单项设置为> 3时，唯一的区别是显示“更大”这个词并且我有菜单项...还是一个表单

：/

没有理解

Answer 1

Durandal需要有一个视图/ windgets的逻辑根元素。 它还会删除根级别注释。

因此，您需要将小部件html包装到另外的div以使其工作：

<div>
  <div data-bind="visible: menuItems().length > 0">
       greater
  </div>

  <div data-bind="visible: menuItems().length == 0">
       equal
  </div>

  <!-- ko if: menuItems().length == 0 -->
  <form role="form">
       <fieldset>
          <legend>Members</legend>
           //teh form markup
       </fieldset>
  </form>
  <!-- /ko -->
  <!-- ko if: menuItems().length > 0 -->
   <h2 data-bind="text: settings.header"></h2>
   <ul data-bind="foreach: menuItems()">
      <li>
       <a href='#' data-bind='click: $data.itemClick, text: $data.name'></a>
      </li>
   </ul>
  <!-- /ko -->
</div>