Meteor - checkbox is maintaining old value

help
1

I am new to Meteor :slight_smile:

I have a template helper:

        userRoleMap: function() {
            var u = getUser();
            if (u) {
                var lstRoles = Meteor.roles.find({}).fetch();
                var userRoles = u.roles ? u.roles : [];
        
                _.map(lstRoles, function(r) {
                    _.extend(r, {
                        userMapped: _.contains(userRoles, r.name)
                    });
                    return r;
                });
    
                 return lstRoles;
            }
        
            return [];
       }

I am using this helper in my template as:

    {{#each userRoleMap}}
       <div class="checkbox">
         <label>
            <input type="checkbox" class="chkUserRole" value="{{name}}" checked="{{userMapped}}"> {{name}}
         </label>
       </div>
    {{/each}}

I am showing the above html/template in a bootstrap-modal. I am showing this modal on click of a button (and setting user-id in a Session which I am using when calling getUser() function).

The issue is the checkbox check state is not changing based on value of “userMapped”. It is getting set correctly first time, but not afterwards. The helper userRoleMap is getting called every-time I open modal, but the checkboxes are having same checked state which they had when it was opened previously (manual checks/unchecks are getting maintained).

The return value of helper method is working as expected (verified by logging it on console).

Anything I am missing here ? Something to do with _.extend() ?

2

As far as I am as a beginner in Meteor understand, your values are not binded neither to reactive vars nor to database so they are not saved. The problem is discussed in http://meteortips.com/second-meteor-tutorial/managing-todos/

“But while users can now edit the values of the to-do list items, those changes won’t be saved to the database.”

I guess it would be easier in Angular-Meteor

3

As @Volodymyr said, in pure Blaze you have to create an event handler to save checkbox’s state. Something like this:

Template.userRoles.events({
  'click .chkUserRole': function(e) {
    var checked = $(e.target).prop('checked');
    // ... Save the data somehow, for eg. using Meteor method call
  }
});
4

Hi @M4v3R, I do not want to save on check change. I have a save button on footer of modal dialog. I am able to save changes on click of button, it is working fine.

My concern is when I don’t save (modal-dismiss), after changing any checkbox, then these changed checkboxes are not picking correct checked state (based on helper) next time the modal is shown for same or other user (they are maintaining old value).

5

My guess here is that when you dismiss the modal it is being removed from the DOM.

6

Hi @copleykj, it is a bootstrap modal, I don’t think it gets removed from DOM.

7

I got it working by setting session key to null for the selected user and marking all checkboxes unchecked.

    'hidden.bs.modal #userRolesModal': function (e) {
          Session.set('selectedUserId', null);
          $('input:checkbox.chkUserRole').removeAttr('checked');
    }

Thank you guys :slight_smile: