使用Blaze-流星浏览模板的“路线”

Question

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

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

但是我似乎无法删除它们，因为找不到与contentHolder关联的当前View以便使用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"));
},
});

Answer 1

我遇到了一个变通方法：这并不是我真正想要的，因为我想使用Blaze的remove，但这似乎很好：

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

}）;

使用Blaze-流星浏览模板的“路线”

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-09-08 15:31:36

使用Blaze-流星浏览模板的“路线”

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-09-08 15:31:36

解决方案1
0 已采纳 2014-09-08 15:31:36