3

私は奇妙なことに出くわしました。（少なくとも私には）そして、この場合はウィジェットを利用したいので、これを修正するための最良のルートが何であるかわからず、データがないときにマークアップを実際にレンダリングさせません

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

クロム経由でコードを検査すると。" " が欠落していることがわかり<!-- ko if: menuItems().length == 0 -->ます.... (図 B) これは、含まれているコンテンツがまだそこにある理由を説明しています... 私の仮定は、" <!-- you get the idea -->" が何らかの形で除外されることです。

これは、マークアップのレンダリング方法などと関係があるのでしょうか?

ウィジェットのバインディング/DOM 作成プロセス中にコメント化されたコード セクションが除外されますか? したがって、ヘッダーと ul がレンダリングされます (コレクションは空であり、空の ul に相当します)...この場合、どちらも存在しないはずです...

図B

ここに画像の説明を入力

メニュー項目を> 3に設定すると、唯一の違いは、「より大きな」という単語が表示され、メニュー項目があり...それでもフォームがあることです

:/

理解していない

4

1 に答える 1

4

Durandal では、ビュー/windget の論理ルート要素が 1 つ必要です。また、ルート レベルのコメントも削除されます。

したがって、ウィジェット 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>
于 2013-08-14T15:48:48.320 に答える