2

我有一个像这样的 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 中时，它当然也可以工作。

4

1 回答 1

5

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

视图只有一个根元素。杜兰达尔需要这个。如果在根目录中找到注释，它们将被删除。在找到多个根元素的情况下，它们将被包裹在一个 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 回答