Невозможно использовать функциональность <yield> внутри тега <route> Riot router

Question

Я не могу использовать <yeild from=""> функциональность внутри тега Riot.js

Пожалуйста, помогите мне понять, что я делаю не так

• Содержимое внутри компонента шаблона, т.е.main-wrapper.tag никогда не обновляется
• Я пытаюсь передать содержимое в шаблон с помощью <yeild to>тег riot.js.

URL-адрес Plunkr находится здесь http://plnkr.co/edit/MX4BytdKxgbkJHXtc5V9?p=preview

    <app-base>
   <router>
      <route path="user">
         here is the route content for user
         <main-wrapper clazz="fix-header">
            <yield to="navbartop">
               <navbartop-cmp></navbartop-cmp>
            </yield>
            <yield to="navbarleft">
               <navbarleft-cmp></navbarleft-cmp>
            </yield>
            <yield to="containercontent">
               <div class="row">
                  <containercontent-cmp></containercontent-cmp>
               </div>
            </yield>
         </main-wrapper>
      </route>
      <route path="partner">
         here is the route content for partner
         <main-wrapper clazz="fix-header">
            <yield to="navbartop">
               <navbartop-cmp></navbartop-cmp>
            </yield>
            <yield to="containercontent">
               <div class="row">
                  <containercontent-cmp></containercontent-cmp>
               </div>
            </yield>
            <yield to="footer">
               <footer-cmp></footer-cmp>
            </yield>
         </main-wrapper>
      </route>
   </router>
   <div class="green">
      <div> outside router</div>
      <main-wrapper clazz="fix-header">
         <yield to="navbartop">
            <navbartop-cmp></navbartop-cmp>
         </yield>
         <yield to="navbarleft">
            <navbarleft-cmp></navbarleft-cmp>
         </yield>
         <yield to="containercontent">
            <div class="row">
               <containercontent-cmp></containercontent-cmp>
            </div>
         </yield>
      </main-wrapper>
   </div>
   <style>
      .green{
      background-color:green;
      }
      route main-wrapper{
      min-height: 400px;
      min-width: 400px;
      background-color:pink;
      display:block;
      }
   </style>
</app-base>

Answer 1

Существует недокументированное поведение, заключающееся в том, что вложенные множественные включения в маршруты не компилируются до дочерних элементов.

Вы можете написать прокси-теги как братьев и сестер app-base в качестве обходного пути, например

<app-base>
  <router>
    <route path="user">
      <user/>  
    </route>
    <route path="partner">
      <partner/>      
    </route>

  </router>
  <style>
  .green{
    background-color:green;
  }
  main-wrapper {
    min-height: 400px;
    min-width: 400px;
    background-color:pink;
    display:block;
  }
  </style>
</app-base>

<user>
  <div class="green">
    <h1>User</h1>
    <main-wrapper clazz="fix-header">
      <yield to="navbartop">
          <navbartop-cmp></navbartop-cmp>
      </yield>
      <yield to="navbarleft">
          <navbarleft-cmp></navbarleft-cmp>
      </yield>
      <yield to="containercontent">
          <div class="row">
              <containercontent-cmp></containercontent-cmp>
          </div>
      </yield>
    </main-wrapper>
  </div>
</user>

<partner>
  <div class="green">
    <h1>Partner</h1>
    <main-wrapper clazz="fix-header">
      <yield to="navbartop">
          <navbartop-cmp></navbartop-cmp>
      </yield>
      <yield to="navbarleft">
          <navbarleft-cmp></navbarleft-cmp>
      </yield>
      <yield to="containercontent">
          <div class="row">
              <containercontent-cmp></containercontent-cmp>
          </div>
      </yield>
    </main-wrapper>
  </div>
</partner>