asp.net-mvc-3 - 撰写主要内容后，Durandal 不撰写页脚 View

Question

我有一个像这样的 durandal shell View :

<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 View 。当我运行该网站时，它工作正常，只是页脚 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 View 应该有一个根元素 http://durandaljs.com/documentation/Creating-A-View .

The view has exactly one root element. Durandal requires this. If comments are found at the root, they will be removed. In the case where more than one root element is found, they will be wrapped in a 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>