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。

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

撰写页脚指令是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>

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

1 个答案: