Simple "Navigation" to change templates


hi, this is a noob question. i searched for 3 hours and can’t get it to work.

i would like to change static content in my app with a simple navigation - show default content, on click on navigation change to other content / template.

something like:

<title>Change content with navigation</title>

<li><a>Second Content</a></li>
<li><a>Third Content</a></li>

/content should go here and change with click on navigation/


<template name=“default”>
default content

<template name=“Second content”>
This is the second static content.

<template name=“Third content”>
Even more content.

any help is highly appreciated!


I recommend you using a router library for this. Did you have a look to Iron Router or other Routing library?

With Iron Router could do something like this:

<template name="layout"> 
  <a href="{{pathFor 'content1'}}">Content 1</a>
  <a href="{{pathFor 'content2'}}">Content 2</a>
  {{> yield }}
<template name="content1">Content 1</template>
<template name="content2">Content 2</template>

In router.js

Router.route('/content1', function () {
  }, {
    name: 'content1'

Router.route('/content2', function () {
  }, {
    name: 'content2'

  layoutTemplate: 'layout'

Hope this helps!




:slight_smile: thanks, i am checking out iron router.


depending on how simple you want, you can also use Template.dynamic and have each nav button change a reactive source, whoch changes the template.