Guide on displaying a partial template upon clicking a specific menu item using Meteor JS

Question

Guide on displaying a partial template upon clicking a specific menu item using Meteor JS

I am a newcomer to Meteor JS and I am looking for a way to render a specific template to a specific part of my web app when a menu is clicked. I am currently using iron-router and layout template. The current layout is functioning correctly. For example, when a user clicks on the 'Home' > 'Article' menu, I want the Article template to be rendered in the mainContent region (displayed in the address bar as /myapp/Article). I want this functionality to work for all menu items, where clicking on a menu item will display the corresponding template in the mainContent part. Is this routing achievable? If not, is there an alternative or better solution to this issue?

Router.map(function(){
  this.route('home', {
    path: '/',
    layoutTemplate: 'homePageLayout',
    yieldTemplates: {
      'myHeader': {to: 'header'},
      'mySideMenu': {to: 'sideMenu'},
      'myMainContent': {to: 'mainContent'},
      'myFooter': {to: 'footer'}
    }
  });
});

layout.html

<template name="homePageLayout">
<div class="container">
    <div class="row">
        {{> yield region='header'}}
    </div>
    <div class="row">
        <div class="col-lg-3">
            {{> yield region='sideMenu'}}
        </div>
        <div class="col-lg-6">
            {{> yield 'mainContent'}}
        </div>
    </div>
    <div class="row">
        <footer>
            {{> yield region='footer'}}
        </footer>
    </div>
</div>

sideMenu.html

<template name="mySideMenu">
<div class="content"></div>
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-home"></span>
                        Home
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <table class="table">
                        <tbody>
                        <tr>
                            <td>
                                <a href="{{pathFor 'mission'}}"><span class="glyphicon glyphicon-pencil text-primary"></span>
                                    Article
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
                                    News
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
                                    Report
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                        Company
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <table class="table">
                        <tbody>
                        <tr>
                            <td>
                                <a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
                                    Mission
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
                                    About us
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
                                    Contact
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

javascript templates meteor yield iron-router

Answer 1

Answer №1

You're so close!

<div class="col-lg-6">
    {{> yield 'mainContent'}}
</div>

modify to

<div class="col-lg-6">
    {{> yield }}
</div>

This is the primary yield. The iron router will display the template of the route here. To specify which template the IR should display, you have 2 options.

Option 1: Do nothing -> The Iron Router will display a template with the same name as the route. For example, it would display the "home" template in this case.

Option 2: Specify the template for your router:

Router.map(function(){
    this.route('home', {
        path: '/',
        template: 'mySuperTemplateForThisRoute',
        layoutTemplate: 'homePageLayout',
        yieldTemplates: {
          'myHeader': {to: 'header'},
          'mySideMenu': {to: 'sideMenu'},
          'myMainContent': {to: 'mainContent'},
          'myFooter': {to: 'footer'}
        }
    });
});

Answer 2

You're so close!

<div class="col-lg-6">
    {{> yield 'mainContent'}}
</div>

modify to

<div class="col-lg-6">
    {{> yield }}
</div>

This is the primary yield. The iron router will display the template of the route here. To specify which template the IR should display, you have 2 options.

Option 1: Do nothing -> The Iron Router will display a template with the same name as the route. For example, it would display the "home" template in this case.

Option 2: Specify the template for your router:

Router.map(function(){
    this.route('home', {
        path: '/',
        template: 'mySuperTemplateForThisRoute',
        layoutTemplate: 'homePageLayout',
        yieldTemplates: {
          'myHeader': {to: 'header'},
          'mySideMenu': {to: 'sideMenu'},
          'myMainContent': {to: 'mainContent'},
          'myFooter': {to: 'footer'}
        }
    });
});

Answer 3

Answer №2

This is how I am addressing my issue, by following this approach. Below is my router.js:

        Router.map(function(){
  this.route('home', {
  path: '/',
  layoutTemplate: 'homePageLayout',
  action: function(){
    this.render('myHeader', {to: 'header'});
    this.render('mySideMenu', {to: 'sideMenu'});
    this.render('home', {to: 'mainContent'});
    this.render('myFooter', {to: 'footer'});
  }
});

  this.route('showMission', {
    path: 'mission',
    layoutTemplate: 'homePageLayout',
    action: function(){
      this.render('myHeader', {to: 'header'});
      this.render('mySideMenu', {to: 'sideMenu'});
      this.render('mission', {to: 'mainContent'});
      this.render('myFooter', {to: 'footer'});
    }
  });

  this.route('showCompanyStructure', {
    path: 'companyStructure',
    layoutTemplate: 'homePageLayout',
    action: function(){
      this.render('myHeader', {to: 'header'});
      this.render('mySideMenu', {to: 'sideMenu'});
      this.render('companyStructure', {to: 'mainContent'});
      this.render('myFooter', {to: 'footer'});
    }
  });

  this.route('showDuties', {
    path: 'duties',
    layoutTemplate: 'homePageLayout',
    action: function(){
      this.render('myHeader', {to: 'header'});
      this.render('mySideMenu', {to: 'sideMenu'});
      this.render('duties', {to: 'mainContent'});
      this.render('myFooter', {to: 'footer'});
    }
  });
});

When a specific menu link is clicked, the corresponding template is rendered to the 'mainContent' area. This approach seems to be functioning properly. However, I believe there might be a more efficient solution available, as my current method involves repetitive code which could potentially lead to the 'myheader' and 'myfooter' templates being loaded multiple times. I am uncertain about this aspect.

Answer 4

This is how I am addressing my issue, by following this approach. Below is my router.js:

        Router.map(function(){
  this.route('home', {
  path: '/',
  layoutTemplate: 'homePageLayout',
  action: function(){
    this.render('myHeader', {to: 'header'});
    this.render('mySideMenu', {to: 'sideMenu'});
    this.render('home', {to: 'mainContent'});
    this.render('myFooter', {to: 'footer'});
  }
});

  this.route('showMission', {
    path: 'mission',
    layoutTemplate: 'homePageLayout',
    action: function(){
      this.render('myHeader', {to: 'header'});
      this.render('mySideMenu', {to: 'sideMenu'});
      this.render('mission', {to: 'mainContent'});
      this.render('myFooter', {to: 'footer'});
    }
  });

  this.route('showCompanyStructure', {
    path: 'companyStructure',
    layoutTemplate: 'homePageLayout',
    action: function(){
      this.render('myHeader', {to: 'header'});
      this.render('mySideMenu', {to: 'sideMenu'});
      this.render('companyStructure', {to: 'mainContent'});
      this.render('myFooter', {to: 'footer'});
    }
  });

  this.route('showDuties', {
    path: 'duties',
    layoutTemplate: 'homePageLayout',
    action: function(){
      this.render('myHeader', {to: 'header'});
      this.render('mySideMenu', {to: 'sideMenu'});
      this.render('duties', {to: 'mainContent'});
      this.render('myFooter', {to: 'footer'});
    }
  });
});

When a specific menu link is clicked, the corresponding template is rendered to the 'mainContent' area. This approach seems to be functioning properly. However, I believe there might be a more efficient solution available, as my current method involves repetitive code which could potentially lead to the 'myheader' and 'myfooter' templates being loaded multiple times. I am uncertain about this aspect.

Guide on displaying a partial template upon clicking a specific menu item using Meteor JS

Answer №1

Answer №2

Similar questions

Challenges with loading times in extensive AngularJS applications

"Oops, it seems like there are an excessive number of connections in Express MySQL causing

Guide on dividing and presenting ajax information into two separate div containers

Is there a way to retrieve the central anchor point position (x, y) of the user's selection in relation to the document or window?

Steps for implementing a conditional statement to handle an empty string in HTML

Injecting CSS styles into dynamically inserted DOM elements

What are the steps for adding a JSON file to a GitHub repository?

The significance of package-lock.json: Understanding demands vs dependencies

Exploring collapsible data tables in Angular with Bootstrap styling

Find the two numbers within a specific range in an array using jQuery

What is the best approach to achieve the old THREE.SpriteAlignment effect in the latest version of three.js?

What is the solution for - Uncaught TypeError: Cannot access the property 'scrollHeight' of an undefined element?

Tips for defining a dynamic class variable in React with Flow

What should be used for data fetching in Next.js: SWR or traditional fetch/axios along with useEffect?

Is it acceptable to manipulate the prevState parameter of the setState function as mutable?

I'm looking for a way to automatically execute the script in my .json file every time I open my index.html page. Can anyone help me

Ways to retrieve the length of the parent array within a component in AngularJS

Incorporating an HTTP-based IFRAME into an HTTPS web address

Surprising lack of elements in the array

Why does one image render while the other with the same src does not?