使用 Blaze - Meteor 通过模板“路由”答案

【问题标题】："Route" through Templates with Blaze - Meteor使用 Blaze - Meteor 通过模板“路由”
【发布时间】：2017-06-23 08:18:36
【问题描述】：

我正在尝试专门使用 Blaze 来替代 Iron-Router，因为我想控制 HTML 页面的正文。

到目前为止，我能够在 contentHolder div 中呈现其他模板。

但是我似乎无法删除它们，因为我找不到与contentHolder 关联的当前视图，以便使用Blaze.remove(renderedView)。因此，当我单击列表时，我会获得附加的页面。

我的 HTML 如下：

<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>

而我的.js文件如下：

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"));
},
});

【问题讨论】：

标签： javascript meteor url-routing meteor-blaze

【解决方案1】：

我遇到了一个解决方法：这不是我真正想要的，因为我想使用 Blaze 的删除，但这似乎工作得很好：

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");
},

});

【讨论】：

这是一个有趣的问题，我认为您可以将其保持打开状态 :) 我认为有比将其破解更好的方法 :)