Multiple income in the Meteor.js application template

Question

I have one common {{> yield}} for iron-router in a layout file that displays my pages, which are templates.

On one of my pages I have a side menu, and according to the choice in this menu, I want to download various templates related to this page on this page.

How can i achieve this?

Answer 1

I did a similar thing using the iron-router layout template option. Suppose I want to create a home view with several views / patterns inside this home view that will change. First I declare my route:

 Router.map(function () { this.route('home', { path: '/', template: 'myHomeTemplate', layoutTemplate: 'layout', yieldTemplates: { 'myAsideTemplate': {to: 'aside'}, 'myFooter': {to: 'footer'} } }); }); 

Where the html for the layout template would look like this:

  <template name="layout"> <aside> {{> yield region='aside'}} </aside> <div> {{> yield}} </div> <footer> {{> yield region='footer'}} </footer> </template> 

So that the patterns specified in the aside and footer returns are displayed in the specified location. For your case, you can specify the output sidemenu .

Not that you have a basic layout and idea, you can define a different route. Say we call it differentHome .

 Router.map(function () { this.route('differentHome', { path: '/differentHome', template: 'myHomeTemplate', layoutTemplate: 'layout', yieldTemplates: { 'myDifferentAsideTemplate': {to: 'aside'}, 'myDifferentFooter': {to: 'footer'} } }); }); 

Notification of this route announcement I am changing the profitability templates, but I am not changing the basic template that will be displayed in the main damage. Now in the event you can redirect a route that will change two different output patterns:

 Router.go("differentHome"); 

Or you can use html for routing, say with a link.

EDIT (Haphazard Solution):

Use the Session Variable To Dictate Side Menu option.

 HTML: <template name="main"> ...... <div class="sideMenu"> {{#if sideMenu1}} {{> side1Template}} {{/if}} {{#if sideMenu2}} {{> side2Template}} {{/if}} </div> </template> JS: Template.main.helpers({ sideMenu1 : function () { return Session.equals("sideMenuChoice", "sideMenu1") }, sideMenu2 : function () { return Session.equals("sideMenuChoice", "sideMenu2") } }); 

Now on the event, set Session to what has ever been sideMenuChoice.