在构成主要内容后,Durandal不会构成页脚视图

Question

我有这样的durandal shell视图:

<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代码直接粘贴到shell中时,它当然也能正常工作.

Answer 1

Durandal视图应该有一个根元素http://durandaljs.com/documentation/Creating-A-View.

该视图只有一个根元素.杜兰达需要这个.如果在根目录中找到了注释,则会删除它们.在找到多个根元素的情况下,它们将被包裹在div中.

撰写页脚指令是外部的注释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>