Javascript 在单击事件时加载meteor模板_Javascript_Meteor

Javascript 在单击事件时加载meteor模板

javascript meteor

Javascript 在单击事件时加载meteor模板,javascript,meteor,Javascript,Meteor,所以，基本上我是meteor（0.8.2）的新手，尝试创建一个包含两个模板（addnewPlace和Map）和一个按钮的基本应用程序。我需要得到的是，当我点击“addNewPlace”按钮时，模板“addNewPlace”应该加载到正文中，否则模板“Map”应该加载。将感谢您的帮助：）我的html代码： <body> {{> menu}} {{> body}} </body> <template name="body">

所以，基本上我是meteor（0.8.2）的新手，尝试创建一个包含两个模板（addnewPlace和Map）和一个按钮的基本应用程序。我需要得到的是，当我点击“addNewPlace”按钮时，模板“addNewPlace”应该加载到正文中，否则模板“Map”应该加载。将感谢您的帮助：）

我的html代码：

<body>
    {{> menu}}
    {{> body}}

</body>

<template name="body">
    {{#if isTrue}}
        {{> addnewPlace}}// tested this template individually, it works.
    {{else}}
        {{> maps}} // tested this template individually, it works too.
    {{/if}}
</template>

<template name="menu">
<h1>Bank Innovation Map</h1>
<input type="button"  value="Add new Place">
</template>

首先，你显然没有在点击事件中改变任何东西（之前为真，之后为真）。但如果你这样做了，我认为你最好使用会话变量来保持反应性

Session.setDefault（'showAddNewPlace'，false）
Template.body.isTrue=function（）{Session.get（'showAddNewPlace'）；}
Template.menu.events({
“单击输入”：函数（）{
//加载新模板
console.log（“您按下了addNewplace按钮”）；//此fn被正确调用
Session.set（'showAddNewPlace'，true）
}
});

Meteor 0.8.2附带了动态模板包含功能。只需在click事件上设置一个会话变量值，就可以在事件上使用模板名称

Session.setDefault('myTemplate', 'DefaultTemplateName');
"click input": function (event) {
    Session.set("myTemplate", 'template_name');
}

您现在可以编写以下内容：

<body>
    {{> menu}}
    {{> body}}

</body>

<template name="body">
  {{> UI.dynamic template=myTemplate}}
</template>

<template name="menu">
<h1>Bank Innovation Map</h1>
<input type="button"  value="Add new Place">
</template>


{{>菜单}
{{>body}
{{>UI.dynamic template=myTemplate}
银行创新地图

您可能想看看这篇文章作为参考：

为了确保，我是否需要对html代码进行任何更改？因为我尝试了这个解决方案，但当我点击按钮时它不起作用。对不起，我的错，我的代码中有一个bug。您需要使

isTrue

成为一个函数，以保持反应性。我现在修好了。请试用新版本。

<body>
    {{> menu}}
    {{> body}}

</body>

<template name="body">
  {{> UI.dynamic template=myTemplate}}
</template>

<template name="menu">
<h1>Bank Innovation Map</h1>
<input type="button"  value="Add new Place">
</template>