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

注意这里我们使用的是与会话相同的反应式的反应式字典。

meteor add reactive-dict

以下是MeteorPad示例

在Link Click Meteor上更改模板

1 个答案: