CODEWITHSUNDEEP
javascripthtmlcssmeteor
code
code

Reputation: 2163

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.

How can I do this?

I used aldeed:template-extension but it doesnt work.

Upvotes: 0

Views: 1366

Answers (1)

Ethaan
Ethaan

Reputation: 11376

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.

First on the onCreate function declare the default values (similar so 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).

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

Here is the MeteorPad Example

Upvotes: 2

Related Questions