Nested Template Content - Not passing the data

[eliorcohen]

Hi,

First of all, i really like aurelia and following the progress for months and waiting for the beta to arrive!

i'm started to work on a big project, and decided to go with aurelia 👍

Starting with a basic implementation of the templating, and cutting the ui into small parts.
i have encounter a rendering problem. and it's seems like nested view having some problem to render when they are nested.

i have the following structure:

app.html

<template>
  <require from="./app/shell/layout.html"></require>

  <layout>
    Some String...
    <router-view></router-view>
  </layout>

</template>

layout.html

<template>
  <require from="./sidebar.html"></require>
  <require from="./topbar.html"></require>
  <require from="./page-container.html"></require>
  <sidebar></sidebar>

  <section style="opacity:1">
    <div class="main-content">
      <topbar></topbar>
      <page-container>
          Layout text ::
          <content></content>
      </page-container>
    </div>
  </section>
</template>

page-container.html

<template>
  <require from="./footer.html"></require>
  <div class="page-content page-thin">
    content go here --->
    <content></content>
    <footer></footer>
  </div>
</template>

my router is navigating into a page called 'testing' and contain the next template:

<template>
  this is the testing page
</template>

my output from the router is not presented in the output of the page, my final output is this:

content go here ---> Layout text ::

when it should be

content go here ---> Layout text :: Some String this is the testing page

if i'm removing the 'page-container' layer, i can see the output of the testing view.

and if i'm editing my layout.html page and shifting the content tag from the inner view to be side by side, i'm getting a duplicate content.

<template>
  <require from="./sidebar.html"></require>
  <require from="./topbar.html"></require>
  <require from="./page-container.html"></require>
  <sidebar></sidebar>

  <section style="opacity:1">
    <div class="main-content">
      <topbar></topbar>
      <page-container>
          Layout text ::
      </page-container>
      <content></content>
    </div>
  </section>
</template>

resulting in:

content go here ---> Layout text :: [Footer View] Some String
content go here ---> Layout text :: [Footer View] 

this is a strange behavior, and i don't think i see it in previous builds, i played a little with this structure as a P.O.C to ensure that aurelia is fit for my solution.

the console don't throw any errors, and the debug state that the resources has loaded with proper dependencies.

DEBUG [templating] importing resources for http://localhost:9000/dist/src/app.html ["http://localhost:9000/dist/src/app/shell/layout.html"]
DEBUG [templating] importing resources for http://localhost:9000/dist/src/app/shell/layout.html ["http://localhost:9000/dist/src/app/shell/sidebar.html", "http://localhost:9000/dist/src/app/shell/topbar.html", "http://localhost:9000/dist/src/app/shell/page-container.html"]
DEBUG [templating] importing resources for http://localhost:9000/dist/src/app/shell/sidebar.html []
DEBUG [templating] importing resources for http://localhost:9000/dist/src/app/shell/topbar.html []
DEBUG [templating] importing resources for http://localhost:9000/dist/src/app/shell/page-container.html ["http://localhost:9000/dist/src/app/shell/footer.html"]
DEBUG [templating] importing resources for http://localhost:9000/dist/src/app/shell/footer.html []
DEBUG [templating] importing resources for http://localhost:9000/dist/src/app/testing.html []

it's seems to me that i'm constructing the views hierarchy as needed, is this a bug or am i doing something wrong?

the router view will not display the content of the testing page (by the route) only if i will remove the layout

Thanks,
Elior

[eliorcohen]

OK, so i have dig around and found the blog post on implementing a modal dialog.

also, i'm highly recommend reading the shadow-dom content guide mention in the article for who never used it before..

this was a good reference to understand what i was doing wrong, figuring out on the way that i can only have one 'content' element that is unnamed and it make sens since it is the exit point for dynamic content.

I'v ended up with this structure that now working.

app.html

<template>
  <require from="./app/shell/main-layout.html"></require>
  <require from="./app/shell/page-container.html"></require>
  <main-layout>
    <page-container>
      <router-view>
      </router-view>
    </page-container>
  </main-layout>
</template>

main-layout.html

<template>
  <require from="./sidebar.html"></require>
  <require from="./topbar.html"></require>

  <sidebar></sidebar>
  <section style="opacity:1">
    <div class="main-content">
      <topbar></topbar>
      <content selector="page-container"></content>
    </div>
  </section>
</template>

page-container.html

<template>
  <require from="./footer.html"></require>
  <div class="page-content page-thin">
    <content></content>
    <footer></footer>
  </div>
</template>

i have found no references in the docs and it will be great if the docs will elaborate on how to create templates and nested templates, and the role of content selectors in the custom elements templates.

Thanks,
Elior

[EisenbergEffect]

Closing as new shadow dom implementation and docs are coming soon.