CODEWITHSUNDEEP
layoutmeteor
Warz
Warz

Reputation: 7766

Use layouts with meteor-router

From this discussion here,

Allow a passed in variable to {{renderPages}} helper

I am trying to display a template within an existing {{renderPage}};

My Use case: I have a very simple high level body template

<template name="body">
    {{> header}}
    {{> notifications}}

    <div class="content" id="content">
        <div id="main-content">

            {{{renderPage}}}

        </div>
    </div>
    {{> footer}}

</template>

And as you can see, my main-content has the {{renderPage}}. This works great, when i set up a route:

 '/home': 'home'

The route finds the template 'home' and replaces renderPage with that template. I want to expand that now and see if route templates can be placed within specific divs.

For example, in my home.html template:

<template name="home">
        {{#if isAdmin}}
                <h1>student</h1>
        {{/if}}
        <div id="inner_home">
                  {{renderPage innerHome}}
         </div>
</template>

Is it possible to have a different route /home/tools : 'home_tools render it's template not in the highest main content div but within my child div inner_home?

EDIT:

I am evaluating an approach that just uses JQuery and the callback function of the meteor-router method to grab the template i am looking for and add it directly to the concerning div tag.

Something like:

 var foundTemplate = _.template($('#item-template').html())
  $('#div_example').html(foundTemplate); //

If anyone has a better approach, please let me know.

Upvotes: 2

Views: 2086

Answers (1)

pstuart2
pstuart2

Reputation: 362

Sure.

client.js

Meteor.Router.add({
  '/home/tools': function() {
    Session.set("homeTemplate", "tools");
    return 'home';
  },
  '/home/admin': function() {
    Session.set("homeTemplate", "admin");
    return 'home';
  }
});

home.js

Template.home.homeTemplateTools = function() {
    return Session.equal("homeTemplate", "tools");
};

Template.home.homeTemplateAdmin = function() {
    return Session.equal("homeTemplate", "admin");
};

home.html

<template name="home">
    {{#if isAdmin}}
            <h1>student</h1>
    {{/if}}
    <div id="inner_home">
    {{#if homeTemplateTools}}
      {{> homeTools}}
    {{/if}}
    {{#if homeTemplateAdmin}}
      {{> homeAdmin}}
    {{/if}}
    </div>
</template>

Upvotes: 0

Related Questions