CODEWITHSUNDEEP
javascriptcheckboxmeteor
user3142695
user3142695

Reputation: 17332

Meteor: Set helper for setting checkboxes in template

I am using alanning:roles to check for roles:

helper.js

Template.user.helpers({
    var loggedInUser = Meteor.user()
    var admin = (Roles.userIsInRole(loggedInUser, ['admin'])) ? true : false,
        editor = (Roles.userIsInRole(loggedInUser, ['admin'])) ? true : false;
    var roles = { admin: admin, editor: editor };
    return roles;
});

template

<template name="user">
    <form>
        <input type="checkbox" name="admin"> Admin
        <input type="checkbox" name="editor"> Admin
    </form>
</template>

How do I set the checkbox to checked if admin or editor is true? Or is there a better way to set the checkboxes checked?

Upvotes: 0

Views: 94

Answers (2)

Billybobbonnet
Billybobbonnet

Reputation: 3226

You can set them on page load accordingly to a user roles like this:

Template.users.rendered = function() {
  var self = this;
  var loggedInUser = Meteor.userId();
  var admin = (Roles.userIsInRole(loggedInUser, ['admin'])),
      editor = (Roles.userIsInRole(loggedInUser, ['editor']));
  //set the checkboxes correct values
  $(self.find("#admin")).prop('checked', admin);
  $(self.find("#editor")).prop('checked', editor);
};

If you need to reactively set the state of your checkboxes, here is how you can proceed:

HTML

<template name="user">
    <form>
        <input type="checkbox" name="admin" {{getValueForChecked "admin"}}> Admin
        <input type="checkbox" name="editor" {{getValueForChecked "editor"}}> Editor
    </form>
</template>

JAVASCRIPT

Template.user.helpers({
  "getValueForChecked": function(value){
    var loggedInUser = Meteor.userId();
    var credentials= (Roles.userIsInRole(loggedInUser, [value]));
    return credentials? "checked" : ""
   } ,
   //or alternatively you can use one helper per field
  "isAdmin": function(){
    var loggedInUser = Meteor.userId();
    var admin = (Roles.userIsInRole(loggedInUser, ['admin']));
    return admin ? "checked" : ""
    },
  "isEditor": function(){
     var loggedInUser = Meteor.userId();
     var editor = (Roles.userIsInRole(loggedInUser, ['editor']));
     return editor? "checked" : ""
    }
});

Upvotes: 0

David Weldon
David Weldon

Reputation: 64312

In general, you want to initialize the state of your template in its onRendered callback like this:

Template.user.onRendered(function() {
  var userId = Meteor.userId();
  $('input[name=admin]').prop('checked', Roles.userIsInRole(userId, ['admin']));
  $('input[name=editor]').prop('checked', Roles.userIsInRole(userId, ['editor']));
});

Note that according to the docs, userIsInRole takes an id (not an object).

If you had multiple roles to check for, you could iterate over them like so:

Template.user.onRendered(function() {
  var userId = Meteor.userId();
  var roles = ['admin', 'editor'];
  _.each(roles, function(role) {
    $("input[name=" + role + "]").prop('checked', Roles.userIsInRole(userId, [role]));
  });
});

Upvotes: 2

Related Questions