2

次のようなデュランダル シェル ビューがあります。

<div id="global">
<!-- ko compose: {view: 'nav'} -->
<!-- /ko-->
<div id="main" class="container">
    <!--ko compose: {model: router.activeItem, 
        afterCompose: router.afterCompose,
        transition: 'entrance'} -->
    <!-- /ko-->
</div>
<div id="push"></div>
 </div>
  <!-- ko compose: {view: 'footer'} -->
  <!-- /ko-->

「nav」と「footer」は別個の HTML ビューです。サイトを実行すると、フッター html が表示されないことを除いて、正常に動作します。ただし、このように配置すると、フッターが表示されます（もちろんページレイアウトは間違っていますが）：

<div id="global">
<!-- ko compose: {view: 'nav'} -->
<!-- /ko-->
<!-- ko compose: {view: 'footer'} -->
 <!-- /ko-->
<div id="main" class="container">
    <!--ko compose: {model: router.activeItem, 
        afterCompose: router.afterCompose,
        transition: 'entrance'} -->
    <!-- /ko-->
</div>
<div id="push"></div>

 </div>

フッターのhtmlコードをシェルに直接貼り付けると、もちろんうまくいきます。

4

1 に答える 1

5

Durandal ビューには、1 つのルート要素http://durandaljs.com/documentation/Creating-A-Viewが必要です。

ビューにはルート要素が 1 つだけあります。デュランダルにはこれが必要です。コメントがルートで見つかった場合、それらは削除されます。複数のルート要素が見つかった場合、それらは div でラップされます。

Compose フッター ディレクティブは外部のコメントであるglobalため、削除されます。「#global」内に移動するとうまくいくはずです。

<div id="global">
<!-- ko compose: {view: 'nav'} -->
<!-- /ko-->
<div id="main" class="container">
    <!--ko compose: {model: router.activeItem, 
        afterCompose: router.afterCompose,
        transition: 'entrance'} -->
    <!-- /ko-->
</div>
<div id="push"></div>
<!-- ko compose: {view: 'footer'} -->
  <!-- /ko--> 
</div>

別の方法として、すべてを別の div 要素にラップして、コメント ルールなしで単一のルート要素を満たすことができます。

<div>
<div id="global">
<!-- ko compose: {view: 'nav'} -->
<!-- /ko-->
<div id="main" class="container">
    <!--ko compose: {model: router.activeItem, 
        afterCompose: router.afterCompose,
        transition: 'entrance'} -->
    <!-- /ko-->
</div>
<div id="push"></div>
 </div>
  <!-- ko compose: {view: 'footer'} -->
  <!-- /ko-->
</div>
于 2013-05-05T10:43:43.673 に答える