Javascript 使用BlazeLayout的Meteor嵌套布线_Javascript_Meteor_Frameworks_Meteor Blaze

Javascript 使用BlazeLayout的Meteor嵌套布线

javascript meteor frameworks

Javascript 使用BlazeLayout的Meteor嵌套布线,javascript,meteor,frameworks,meteor-blaze,Javascript,Meteor,Frameworks,Meteor Blaze,我正在尝试使用flow router在基于嵌套路由的模板中呈现模板。重读这篇文章让我感到困惑，所以我将举一个例子主容器： <body> <header> <div id="headerRight"> <a href="/createCourse"><span class="headerButton" id="teachButton">Teach</span></a> </d

我正在尝试使用flow router在基于嵌套路由的模板中呈现模板。重读这篇文章让我感到困惑，所以我将举一个例子

主容器：

<body>
  <header>
    <div id="headerRight">
      <a href="/createCourse"><span class="headerButton" id="teachButton">Teach</span></a>
    </div>
  </header>

  <div class="container" style="padding: 50px;"> 

   {{> mainLayout}}

  </div>
</body>

<template name="mainLayout">
  <main>
    {{>Template.dynamic template=main}}
  </main>
</template>

嵌套路由：

<template name="courseChooseCont">
  <header>
    <i class="fa fa-times" aria-hidden="true"></i>
  </header>
  <ul>
    <li><a href="/createCourse/category">Category</a></li>
    <li><a href="/createCourse/availabilityCheck">Availability</a></li>
    <li><a href="/createCourse/simpleAvailability">Simple Availability</a></li>
  </ul>

  {{> courseLayout}}

  <div name="courseMain"></div>

  <div class="bottomBar">
    <div class="back">Back</div>
    <div class="next">Next</div>
  </div>
</template>

<template name="courseLayout">
  <main>
    {{>Template.dynamic template=content}}
  </main>
</template>

当我渲染嵌套路由时，它似乎覆盖了应该包含嵌套模板的“courseChooseCont”模板，并且只是在“主容器”中显示嵌套模板

我假设我使用BlazeLayout是错误的，但我似乎找不到解决方案

<template name="courseChooseCont">
  <header>
    <i class="fa fa-times" aria-hidden="true"></i>
  </header>
  <ul>
    <li><a href="/createCourse/category">Category</a></li>
    <li><a href="/createCourse/availabilityCheck">Availability</a></li>
    <li><a href="/createCourse/simpleAvailability">Simple Availability</a></li>
  </ul>

  {{> courseLayout}}

  <div name="courseMain"></div>

  <div class="bottomBar">
    <div class="back">Back</div>
    <div class="next">Next</div>
  </div>
</template>

<template name="courseLayout">
  <main>
    {{>Template.dynamic template=content}}
  </main>
</template>

var createCourse = FlowRouter.group({
  prefix: '/createCourse'
});

createCourse.route('/', {
  action: function() {
    BlazeLayout.render("courseLayout", {content: "base"});
  }
});

createCourse.route('/availabilityCheck', {
  action: function() {
    BlazeLayout.render("courseLayout", {content: "availabilityCheck"});
  }
});

createCourse.route('/simpleAvailability', {
  action: function() {
    BlazeLayout.render("courseLayout", {content: "simpleAvailability"});
  }
});