Simple "Navigation" to change templates

help
1

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:

<head>
<title>Change content with navigation</title>
</head>

<body>
<nav>
<ul>
<li><a>Default</a*></li>
<li><a>Second Content</a></li>
<li><a>Third Content</a></li>
</ul>
</nav>

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

</body>

<template name=“default”>
default content
</template>

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

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

any help is highly appreciated!

2

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"> 
<body>
  <a href="{{pathFor 'content1'}}">Content 1</a>
  <a href="{{pathFor 'content2'}}">Content 2</a>
  {{> yield }}
</body>
</template>
<template name="content1">Content 1</template>
<template name="content2">Content 2</template>

In router.js

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

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

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

Hope this helps!

Documentation: http://iron-meteor.github.io/iron-router/

Regards

3

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

4

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.