dom - Durandal Widget: Knockout " " 异常

Question

我遇到了一些奇怪的事情。（至少对我而言）并且不确定最好的方法是什么来纠正这个问题，因为在这种情况下，id 喜欢使用小部件，并且在没有数据时不让我的标记实际呈现

  <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 要求您的视图/窗口具有一个逻辑根元素。它还删除了根级别的注释。

因此，您需要将您的小部件 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>