Meteor: Disable button based on data context?

问题

I have a multi-tenant Meteor app and want to allow users with access to more than one organization's account to switch between organizations.

The ability to switch organizations is working, but I now want to be able to disable the button for the user's current organization, so they can not switch to the same organization they are already in.

Right now I'm trying to retrieve each button's value based on a data-domain attribute, but it comes back undefined. Also, console.log(this); comes back as undefined for the helper.

How would I get the data context to match the current button's value to the user's current organization?

Here's the template:

<template name="switchAccountsModal">
  <div class="modal fade switchAccounts" id="switchAccounts" tabindex="-1" 
       role="dialog" aria-labelledby="switchAccounts">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"
                  aria-label="Close">
             <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">Select an Organization</h4>
        </div>
        <div class="modal-body">
          <div class="list-group">
            {{#each organizations}}
            <!-- {{activeOrg}} should render 'disabled' if this equals the 
                 user's current organization. -->
            <button type="button" class="list-group-item switchAccount" 
                    data-domain="{{this}}" {{activeOrg}}>{{this}}</button>
            {{/each}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

And here's the helper:

Template.switchAccountsModal.helpers({
  organizations: () => {
    var organizations = Meteor.user().organizations;
    console.log('organizations: ' + organizations);
    return organizations;
  },
  activeOrg: () => {
    console.log('activeOrg.this: ' + this);
    var currentOrg = Meteor.user().profile.currentOrg;
    var thisOrg    = $(this).data('domain');
    console.log('activeOrg.thisOrg: ' + thisOrg);
    return (this == currentOrg) ? {disabled: 'disabled'} : {};
  }
});

Any help would be greatly appreciated!

回答1:

Thanks to the geniuses in the Meteor Chef Slack channel (shout out to brajt, stephendayta & michelfloyd), I was able to work through and pass the correct data context. While there's a couple of options, the one that worked for me was to pass an argument this inside the spacebars tag like {{activeOrg this}} and then pick it up in the helper.

Here's the updated code if anyone else runs into this issue:

<template name="switchAccountsModal">
  <div class="modal fade switchAccounts" id="switchAccounts" tabindex="-1"
       role="dialog" aria-labelledby="switchAccounts">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" 
              aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">Select an Organization</h4>
        </div>
        <div class="modal-body">
          <div class="list-group">
            {{#each organizations}}
            <button type="button" class="list-group-item switchAccount"
                {{activeOrg this}}>
              {{this}}
            </button>
            {{/each}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

And the updated helper:

Template.switchAccountsModal.helpers({
  organizations: () => {
    var organizations = Meteor.user().organizations;
    return organizations;
  },
  activeOrg: (org) => {
    let currentOrg = Meteor.user().profile.currentOrg,
        thisOrg    = org;
    return (currentOrg === thisOrg) ? {disabled: 'disabled'} : {};
  }
});

The other option from brajt is to use #each item in items instead of #each items. I had tried that earlier, placing the actual button inside the #each variable into a subtemplate, but still wasn't able to pass the data context.

来源：https://stackoverflow.com/questions/35159019/meteor-disable-button-based-on-data-context

标签

meteor