Question

所以，基本上我是meteor（0.8.2）的新手，并尝试创建一个具有两个模板（addnewPlace和Map）和一个按钮的基本应用程序。我需要得到的是，当我点击“添加新地点”按钮时，模板“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>

我的js代码：

Template.body.isTrue = true;
Template.menu.events({
    'click input': function(){
        //load a new template
    console.log("You pressed the addNewplace button");//this fn is called properly
        Template.body.isTrue = true;
    }

    });

Answer 1

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

Session.setDefault('showAddNewPlace', false)
Template.body.isTrue = function() { Session.get('showAddNewPlace'); }
Template.menu.events({
    'click input': function(){
        //load a new template
        console.log("You pressed the addNewplace button");//this fn is called properly
           Session.set('showAddNewPlace', true)
    }
});

Answer 2

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>

您可以查看本文作为参考： https://www.discovermeteor.com/blog/blaze-dynamic-template-includes/

在点击事件上加载流星模板

2 个答案: