Question

我无法在Riot.js标签内使用<yeild from="">功能

请帮助我理解我做错了什么

模板组件内的内容，即main-wrapper.tag永远不会更新
我正在尝试使用<yeild to>将内容传递给模板 riot.js的标签。

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>

无法在Riot路由器的<route>标记内使用<yield>功能

1 个答案: