HTML not getting rendered when Template.mytemplate.field is placed within main template event method

Question

In my page (html form) I have 2 options (radio buttons). Based on the selection of the user I want to show different input fields. Here are my templates.

<template name="main">
  <div class="radio">
    <label>
      <input id="radio1" name="optiontype" type="radio" value="1"> Option1
    </label>
  </div>
  <div class="radio">
     <label>
       <input id="radio2" name="optiontype" type="radio" value="2"> Option1
     </label>
  </div>
  <div>
    {{ > optionTemplate }}
  </div>
</template>

Here is my option template

<template name="optionTemplate">
    {{#if option1}}
       <div class="form-group">
         <input type="text" class="form-control" placeholder="enter option1">
       </div>
       <div class="form-group">
         <input type="text" class="form-control =" placeholder="enter option1">
       </div>
    {{/if}}
    {{#if option2}}
       <div class="form-group">
         <input type="text" class="form-control =" placeholder="enter option2">
       </div>
    {{/if}}
</template>

In my main.js file I have the following code

Template.main.events({
"click #radio1" :  function(event, template) {
    Template.optionTemplate.option1 = function(){
       return true;
    }

},

"click #radio2" : function (event, template) {
    Template.optionTemplate.option2 = function(){
       return true;
    }
}
});

Now what is happening is that when I place

Template.optionTemplate.option1 = function(){
       return true;
    }

outside the Template.main.events then the HTML within the "option if block" appears but obviously thats not what I want, but when place it inside Template.main.events({...}) then nothing happens. What I want is dynamic insertion of HTML based on user selection. I would really appreciate if someone can clarify why is this happening and what is the solution for this. Thanks.

score 0 · Answer 1 · answered Jan 28 '14 at 13:01

Since you want dynamic HTML insertion you need a reactive data source. For your setting a Session variable (which is a reactive data source) would be perfect. Every time a reactive data source (your session variable) changes, code that depends on it will be automatically recomputed.

So let's listen to changes to any of the radio buttons and update the session variables option1 and option2, which tell us whether the corresponding radio button is checked:

Template.main.events({
    "change input[type=radio]" : function (event, template) {
        Session.set("option1", template.find('input:radio[id=radio1]').checked);
        Session.set("option2", template.find('input:radio[id=radio2]').checked);
    }
});

In addition we'll use a global template helper which allows us to easily access any session variable in HTML using {{session "mySessionVariable"}}:

Handlebars.registerHelper('session',function(input){
    return Session.get(input);
});

That's all. Full code:

JS:

if (Meteor.isClient) {
    Template.main.events({
        "change input[type=radio]" : function (event, template) {
            Session.set("option1", template.find('input:radio[id=radio1]').checked);
            Session.set("option2", template.find('input:radio[id=radio2]').checked);
        }
    });

    Handlebars.registerHelper('session',function(input){
        return Session.get(input);
    });
}

HTML:

<head>
  <title>options</title>
</head>

<body>
  {{> main}}
</body>

<template name="main">
  <div class="radio">
    <label>
      <input id="radio1" name="optiontype" type="radio" value="1"> Option1
    </label>
  </div>
  <div class="radio">
     <label>
       <input id="radio2" name="optiontype" type="radio" value="2"> Option2
     </label>
  </div>
  <div>
    {{> optionTemplate }}
  </div>
</template>

<template name="optionTemplate">
    {{#if session "option1"}}
       <div class="form-group">
         <input type="text" class="form-control" placeholder="enter option1">
       </div>
       <div class="form-group">
         <input type="text" class="form-control =" placeholder="enter option1">
       </div>
    {{/if}}
    {{#if session "option2"}}
       <div class="form-group">
         <input type="text" class="form-control =" placeholder="enter option2">
       </div>
    {{/if}}
</template>

Thanks for your answer. One more question though. Is it really necessary to have create a this helper for the session variables. Can't we just check the session directly in the template? — Taimoor, Jan 28 '14 at 22:33
You are welcome. AFAIK there is no way to access session variables directly. See also here: http://stackoverflow.com/questions/13060608/can-meteor-templates-access-session-variables-directly — Tobias, Jan 29 '14 at 07:29

HTML not getting rendered when Template.mytemplate.field is placed within main template event method

1 Answers1