Durandal no compone la vista de pie de página después de que se compuso el contenido principal

I have a durandal shell view like this:

<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' and 'footer' are separate html views. When I run the site it works fine except that the footer html is never shown. However, when I put it like this the footer is being displayed (Although the page layout is wrong of course):

<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>

When I paste the html code of the footer directly into the shell it works as well of course.

preguntado el 05 de mayo de 13 a las 09:05

1 Respuestas

Durandal views should have one root element 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.

The compose footer directive is a comment outside of global and therefore will be removed. Moving it inside `#global' should do the trick.

<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>

As an alternative you could wrap everything into another div element to fulfill the single root element without comment rule.

<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>

respondido 25 mar '14, 18:03

RTFM I guess :) Thanks, I went with the second option - hoez

@fhoetzing - don't sweat it. :) something like that can easily be overlooked in a new framework such as Durandal - mikekidder

So it looks like you're adding the to shell.html... Is it possible to add it to the file that contains shell.html? E.G: <body> ... <div id="applicationHost">...</div> <!-- THIS HERE --><div><div data-bind="compose: 'partials/globalNav.html'"></div></div> ... </body>. The reason I'm asking is cause I thought I could use compose simply as an include anywhere (just like ng-include for Angular). - Cody

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.