Durandal Widget：淘汰“<！ - 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 -->”被某种方式排除在外。< / p>

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

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

图B

当我将菜单项设置为＆gt; 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>