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

Question

So, Basically i'm new to meteor(0.8.2) and trying to create a basic app having two templates(addnewPlace and Map) and a single button. 因此，基本上我是流星（0.8.2）的新手，并试图创建一个具有两个模板（addnewPlace和Map）和一个按钮的基本应用程序。 What i need to get is that, when i click on "Add new Place" button, template "addNewPlace" should be loaded in body or else template "Map" should be loaded. 我需要得到的是，当我单击“添加新位置”按钮时，应将模板“ addNewPlace”加载到正文中，否则应加载模板“ Map”。 Help will be appreciated :) 帮助将不胜感激:)

My html code: 我的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>

My js code: 我的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

Well first of all you obviously aren't changing anything in the click event (true before, true after). 首先，您显然没有更改click事件中的任何内容（之前为true，之后为true）。 But also if you did, I think you might be better off using a session variable for this, to maintain reactivity. 但是如果您这样做了，我认为您最好使用会话变量来保持反应性。

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 comes in with the dynamic template include feature. 流星0.8.2带有动态模板包含功能。 Just set a session variable value on click event and you would like to use the template name on the event. 只需在click事件上设置会话变量值，然后您就可以在事件上使用模板名称。

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

You can now write this: 您现在可以这样写：

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

You may like to take a look at this article for the reference: https://www.discovermeteor.com/blog/blaze-dynamic-template-includes/ 您可能想看看这篇文章作为参考： https : //www.discovermeteor.com/blog/blaze-dynamic-template-includes/

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

问题描述

2 个解决方案

解决方案1
0 2014-07-11 16:59:55

解决方案2
0 2015-12-01 10:23:08

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

问题描述

2 个解决方案

解决方案1 0 2014-07-11 16:59:55

解决方案2 0 2015-12-01 10:23:08

解决方案1
0 2014-07-11 16:59:55

解决方案2
0 2015-12-01 10:23:08