CODEWITHSUNDEEP
meteor
bp123
bp123

Reputation: 3417

Set a variable onCreated

I'm trying to set this.editMode to a variable but it just doesn't seem to return a value. I'm not sure if I'm setting the variable correctly or if it is something else entirely. 

Template.user.onCreated(function() {

    var classes = function (){

        var class = (this.profile.class && this.profile.class.name);


        if (class != null) {
            return true;
        } else {
            return false;
        };
    };

    this.editMode = new ReactiveVar(classes);
});

Upvotes: 0

Views: 661

Answers (2)

Areca
Areca

Reputation: 1292

I would use Session for such use case.

Session.setDefault('userEditMode', false);

Template.user.rendered = function() {

    var classes = function (){

        var class = (this.profile.class && this.profile.class.name);

        if (class != null) {
          return true;
        } else {
          return false;
        };
    };

    Session.set('userEditMode',classes);
});

UPDATE (for your comment)

You should check with Session variable, instead of classes function.

So in your template use:

{{#if isEditMode}} {{> form}} {{else}} {{> list}} {{/if}}

And in your template helper:

Template.user.helpers({
    isEditMode : return Session.get('isEditMode');
});

As an alternative if you use handlebars-helpers for meteor, you can directly access Session variable in your template:

{{#if $.Session.get 'isEditMode'}} {{> form}} {{else}} {{> list}} {{/if}}

With this you do not need to define your helper.

Upvotes: 0

Kishor
Kishor

Reputation: 2677

In your template html, 

<template name="user">
    {{#if isEditMode}}
       <div class="btn btn-info save-user">
          <i class="fa fa-save"></i>
       </div>
       <!-- your edit form here -->
    {{else}}
       <div class="btn btn-info edit-user">
          <i class="fa fa-pencil"></i>
       </div>
       <!-- your view form here -->
    {{/if}}
</template>

Then in your template javascript, first add a reactive variable to the template instance, then add click event listeners that edit this reactive variable. Use a helper to retrieve the mode to display the form or list accordingly.

Template.user.onCreated(function() {
    this.isEditMode = new ReactiveVar(false);
});

Template.user.events({
    'click .edit-user': function (ev, template) {
        template.isEditMode.set(true);
    },
    'click .save-user': function (ev, template) {
        //validate and save user data here and in the callback, set
        template.isEditMode.set(false);
    }
});

Template.user.helpers({
    'isEditMode': function () {
        var template = Template.instance();
        return template.isEditMode.get();
    }
});

UPDATE

If I understand you correctly, you want to show the form or list based on user information when template is loaded. If that is the case, the problem with your code is, it is not calling the function. Change it to something like this,

Template.user.onCreated(function() {
   var template = this;
   template.editMode = new ReactiveVar(false); 
   template.autorun(function () {
       var data = Template.currentData(); //Is template data your user?   
       var isClassAvailable = (data.profile.class && data.profile.class.name) ? true : false;
       template.editMode.set(isClassAvailable); 
   });
});

Upvotes: 3

Related Questions