编写主要内容后，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。

视图只有一个根元素。杜兰达尔需要这个。如果 cmets 在根目录中找到，它们将被删除。在这种情况下 如果找到多个根元素，它们将被包裹在一个 分区。

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>