如何在主要内容中呈现动态布局和静态

时间:2014-09-23 00:23:40

标签: meteor iron-router

我刚开始使用来自灰烬的流星。我有一个菜单,项目被渲染到maincontent布局。现在我想在maincontent布局中有第二个菜单。

示例:我点击导航中的人员并获取人员列表。现在我点击一个人,我得到那个人的详细信息。导航仍然可见。这就是我迄今为止所做的工作。

现在我想在人员模板中添加另一个菜单,例如todo,events。

Router.configure({
 layoutTemplate: 'layout'
});


<template name="person">

  //shows the details of that one person

</template>

<template name="events">

 //shows the events of that one person

</template>

<template name="todos">

  //shows the todos of that one person

</template>

<template name="personlayout">

   <a href="{{pathFor 'person'}}">persondetails</a>
   <a href="{{pathFor 'todos'}}">todos</a>
   <a href="{{pathFor 'events'}}">events</a>

</template>

只要显示人员模板,就应始终显示3个链接obove。喜欢导航到localhost:3000 / person / 5403789845ef834ed58ae745

那么如何在personlayout模板中渲染人物或待办事项或事件模板呢?

1 个答案:

答案 0 :(得分:0)

首先,您需要在yield中定义personLayout

<template name="personLayout">
   {{yield}}
   {{yield "persons"}}
   {{yield "todos"}}
   {{yield "events"}}
</template>

现在您可以使用此布局:

使用路线

Router.route('/post/:_id', function () {
  this.layout('personLayut');

  // render the Post template into the "main" region
  // {{> yield}}
  this.render('Post');

  // render the person template into the yield region named "person" 
  // {{> yield "persons"}}
  this.render('person', {to: 'person'});

  // render the todos template into the yield region named "todos" 
  // {{> yield "todos"}}
  this.render('todos', {to: 'todos'});
});

使用contentFor

<template name="Page">
  <p>
    EVerything from here is going to `personLayout` {{> yield}}
  </p>

  {{> contentFor region="person" template="person"}}

  {{> contentFor region="todos" template="todos"}}

  {{> contentFor region="todos" template="events"}}

</template>

Read IronRouter docs