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!
helios
October 17, 2015, 1:47pm
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
thanks, i am checking out iron router.
dotcomet:
simple navigation
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.