Search code examples
javascriptmeteorurl-routingmeteor-blaze

"Route" through Templates with Blaze - Meteor

I'm trying to use Blaze exclusively in alternative to Iron-Router because I want to keep control of the body of the HTML page.

So far I am able to render other templates in the contentHolder div.

However I can't seem to remove them as I can't find the current View associated with the contentHolder, in order to use Blaze.remove(renderedView). Thus, I get the pages appended as I click along the list.

My HTML is as follows:

<head>
    <title>routeTest</title>
</head>

<body>
    <h1>Button menu</h1>
    {{> buttonMenu}}
    <div id="contentHolder">
    </div>
</body>

<template name="buttonMenu">
    <ul>
        <li id="home">Home</li>
        <li id="calendar">Calendar</li>
        <li id="history">History</li>
    </ul>
</template>

<template name="home">
    <h1>Home template is now rendered</h1>
</template>

<template name="calendar">
    <h1>Calendar template is now rendered</h1>
</template>

<template name="history">
    <h1>History template is now rendered</h1>
</template>

And my .js file is as follows:

Template.buttonMenu.events({
'click #home': function(){
    console.log(Blaze.getView(document.getElementById("contentHolder")).name);
    Blaze.render(Template.home, document.getElementById("contentHolder"));
},

'click #calendar': function(){
    console.log(Blaze.getView(document.getElementById("contentHolder")).name);
    Blaze.render(Template.calendar, document.getElementById("contentHolder"));
},

'click #history': function(){
    console.log(Blaze.getView(document.getElementById("contentHolder")).name);
    Blaze.render(Template.history, document.getElementById("contentHolder"));
},
});
Solution

  • I ran into a workaround: it's not really what I wanted, as I wanted to use Blaze's remove, but this seems to work just fine:

    Template.buttonMenu.events({

'click #home': function(){
document.getElementById("contentHolder").innerHTML = "";

    Blaze.render(Template.home, document.getElementById("contentHolder"));
    console.log(Blaze.getView(document.getElementById("contentHolder")));

    Session.set("currentPage", "home");
},

'click #calendar': function(){
document.getElementById("contentHolder").innerHTML = "";

    Blaze.render(Template.calendar, document.getElementById("contentHolder"));
    console.log(Blaze.getView(document.getElementById("contentHolder")));

    Session.set("currentPage", "calendar");
},

'click #history': function(){

document.getElementById("contentHolder").innerHTML = "";

    Blaze.render(Template.history, document.getElementById("contentHolder"));
    console.log(Blaze.getView(document.getElementById("contentHolder")));

    Session.set("currentPage", "history");
},

    });