[英]Changing template on Link Click Meteor
There is a button : 有一个按钮:
<a id = "login" class="waves-effect white blue-text text-darken-2 btn"><i class="fa fa-pencil"></i> Write</a>
and there are two templates, firstpage, and secondpage. 有两个模板,第一页和第二页。
Now, I want Meteor to change templates when I click that link, and render the second page. 现在,我希望Meteor在单击该链接时更改模板,并呈现第二页。
How can I do this? 我怎样才能做到这一点?
I used aldeed:template-extension
but it doesnt work. 我用
aldeed:template-extension
但是不起作用。
You can use some helpers here, and template variables. 您可以在此处使用一些帮助程序和模板变量。
Lets say you have this template. 假设您有此模板。
<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>
Now the Javascript. 现在是Javascript。
First on the onCreate function declare the default values (similar so Session.setDefault) 首先在onCreate函数上声明默认值(类似于Session.setDefault)
Template.example.onCreated( function(){
var self = this;
self.vars = new ReactiveDict();
self.vars.setDefault( 'clicked' , true ); //default is true
});
Now the event to change the state of the clicked to false (Similar to Session get/set). 现在,将点击状态更改为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.
}
})
Now we something to listen our variables changes, lets use a helper 现在我们来监听变量的变化,让我们使用一个助手
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
}
})
NOTE Here we are using reactive-dict wich share the same syntaxis of a Session. 注意在这里,我们使用的是反应式字典,它与会话共享相同的语法。
meteor add reactive-dict
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.