CODEWITHSUNDEEP
meteormeteor-blaze
MChan
MChan

Reputation: 7202

Meteor Conditionally displaying nested templates

I have a template with several sub nested templates which should conditionally show based on the data saved in TemplateC collection as shown below, so I used the if condition in my template as shown below, but I am always having all sub templates displayed despite if the condition return true or false. Can someone please check my code and tell me what I am missing here? Thanks

        var templateArray = ['false', 'false'];

        Template.formBuilderPreview.created = function() {

            var cursor = TemplatesC.find({}, { sort: { templateCode: 1 }});    
            if (!cursor.count()) return;

            cursor.forEach(function (row) {
              //only case 1 return in the switch below as case 2 never exist
                switch(row.templateCode) {
                    case 1: templateArray[0] = true; break;
                    case 2: templateArray[1] = true; break;
                    default: templateArray[0] = true;
                }

            });
        };


        Template.formBuilderPreview.helpers({

            template1box: function(){      
                console.log(templateArray[0]);  //This returns true
                return templateArray[0];
            },
            template2box: function(){    
                console.log(templateArray[1]); //This returns false
                return templateArray[1];
            }

        });

Template:

    <template name="formBuilderPreview">

        <div id="fullpage">
            {{#if template1box}}                
                {{> temp01}}
            {{/if}}

            {{#if template2box}}                        
                {{> temp02}}
            {{/if}}            
        </div>

    </template>

Upvotes: 1

Views: 70

Answers (2)

Mahmoud Metwally
Mahmoud Metwally

Reputation: 990

You defined an array of strings, which I believe is causing the trouble, so I suggest you change 

var templateArray = ['false', 'false'];

to 

var templateArray = [false, false];

and it will work smoothly

Upvotes: 1

Ethaan
Ethaan

Reputation: 11376

Put that helpers together. 

Template.formBuilderPreview.helpers({
     template1box: function(){      
        if(templateArray[1]){
             return true;
          }else{
             return false;
          }
      });

Now the Template should look like this.

<template name="formBuilderPreview">
     {{#if template1box}}  
     <!-- If helper return TRUE this temp01 will be showed. -->              
            {{> temp01}}
        {{else}}
     <!-- If helper return FALSE this temp01 will be showed. --> 
            {{> temp02}}
      {{/if}}
 </template>

you get the idea with the helper, make it only on 1 helper, retiring true/false.

Upvotes: 1

Related Questions