0

I´m just starting with meteor coming from ember. What i have is a menu and the items get rendered into the maincontent layout. Now i would like to have a second menu in the maincontent layout.

Example: I click on people in the navigation and get a list of people. Now i click on a person and i get the details of that person. The navigation is still visible. This is what i have so working so far.

Now i would like to have another menu in the person template with items like 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>

The 3 links obove should always be visible as long a the person template is shown. Like when navigating to localhost:3000/person/5403789845ef834ed58ae745

So how can i render the person or todos or events template in the personlayout template?

Benjamin79
  • 83
  • 1
  • 9
  • In iron router set layoutTemplate for the path you want. It will be used instead of default template. Say you want a totally different structured template for link x or y. – yoK0 Sep 23 '14 at 00:59

1 Answers1

0

First you need to define yield in personLayout.

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

Now you can use this layout:

Using Routes

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'});
});

Using 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

Kuba Wyrobek
  • 5,273
  • 1
  • 22
  • 26
  • thank you. But this seems to work only for one level deep nested templates. What i need is a layout in layout. I have a layout template which contains top-navigation and is visible all the time. In that navigation i have multipe menue items. One of them is the people template. In that there is a list of persons. Now when i´m in person/123 there should be another menu. this contains items like persondetails(visible on load), persontodos, personevents, ... When i click on todos for example, i´d like to show the todos for that person. persondetails, events, ... only shows when clicking on it. – Benjamin79 Sep 23 '14 at 19:28