If else block in spacebars template not executing for the second time

help
1

The objective is to show buttons dynamically on click event. On click of edit button, save and cancel buttons are displayed. On click of cancel button, the edit button should be displayed back which is not working. I am using session in helper.

template.html

<head>
    <title>ifelse</title>
</head>

<body>
    <h1>Welcome to Meteor!</h1>

    {{> hello}}
</body>

<template name="hello">
    {{isEdit}}

    {{#if isEdit}}
        <div class="saveCancelBtnBarLogic">
            <button class="button">Save</button>
            <button class="cancelEditLogic button">Cancel</button>
        </div>
        {{else}}
        <button class="editDishButtonLogic button">Edit</button>
    {{/if}}
</template>

template.js

if (Meteor.isClient) {

    Template.hello.events({
        "click .editDishButtonLogic": function(event, template) {
            console.log("edit true");

            Session.set("isEditSession", "true");
        }

    });

    Template.hello.events({
        "click .cancelEditLogic": function(event, template) {
            console.log("edit false");
            Session.set("isEditSession", "false");
        }
    });

    Template.hello.helpers({
        isEdit: function() {
            console.log("edit helper : " + Session.get("isEditSession"));
            return Session.get("isEditSession");
        }
    });
}

The project is also deployed @ http://ifelse.meteor.com for reference. Asked at SO @ http://stackoverflow.com/questions/31998566/meteor-blaze-if-else-block-in-spacebars-template-not-executing-for-the-second

2

I am not sure if you can have 2x Template.hello.events

Define it all in that 1, both button event handlers

3

It’s because you are setting the session to the string "false", not the boolean false

It might as well be "banana" which is not false.

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures for more info

2 Likes
4

@shock @benjick

I edited my code as per both of your comments and voila it’s working :smile:

EDITEDtemplate.js

 if (Meteor.isClient) {

    Template.hello.events({
        "click .editDishButtonLogic": function(event, template) {
            console.log("edit true");

            Session.set("isEditSession", true);
        },

        "click .cancelEditLogic": function(event, template) {
            console.log("edit false");
            Session.set("isEditSession", false);
        }

    });

    Template.hello.helpers({
        isEdit: function() {
            console.log("edit helper : " + Session.get("isEditSession"));
            return Session.get("isEditSession");
        }
    });
}

Thanks a lot for the quick response! Cheers!

2 Likes