javascript - 更改链接上的模板单击 meteor

Question

有一个按钮:

<a id = "login" class="waves-effect white blue-text text-darken-2 btn"><i class="fa fa-pencil"></i>  Write</a>

并且有两个模板，firstpage 和 secondpage。

现在，我希望 Meteor 在我单击该链接时更改模板，并呈现第二个页面。

我该怎么做？

我使用了 aldeed:template-extension 但它不起作用。

Answer 1

您可以在此处使用一些助手和模板变量。

假设您有这个模板。

<template name="example">
 {{#if clicked}}
  {{> firstPage}} <!-- the firstPage template will be rendered if the var is == false -->
   {{else}}
  {{> secondPage}} <!-- this will be render when the session is equals to true -->
 {{/if}}
</template>

现在是 Javascript。

首先在 onCreate函数声明默认值(类似于 Session.setDefault)

Template.example.onCreated( function(){
    var self = this;

    self.vars = new ReactiveDict();

    self.vars.setDefault( 'clicked' , true ); //default is true

});

现在将点击的状态更改为 false 的事件(类似于 Session get/set)。

Template.example.events({
  'click .waves-effect':function(event,template){
    var instance = Template.instance();
        instance.vars.set('clicked', false) //set to true.
  }
})

现在我们要监听变量的变化，让我们使用一个助手

Template.example.helpers({
 clicked:function(){
 var instance = Template.instance(); //http://docs.meteor.com/#/full/template_instance
 return  instance.vars.get('clicked') //this will return false(default) | true
 }
})

注意这里我们使用的是 reactive-dict，它与 Session 具有相同的语法。

meteor add reactive-dict

这是 MeteorPad示例