Meteor:根据数据上下文禁用按钮？

Question

我有一个 Multi-Tenancy Meteor 应用，希望允许有权访问多个组织帐户的用户在组织之间进行切换。

切换组织的功能正在发挥作用，但我现在希望能够禁用用户当前组织的按钮，这样他们就无法切换到他们已经所在的同一组织。

现在我正在尝试根据data-domain属性检索每个按钮的值，但它返回undefined。此外，console.log(this); 对于帮助程序返回为 undefined。

如何获取数据上下文以将当前按钮的值与用户当前的组织相匹配？

这是模板:

<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>

这是助手:

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'} : {};
  }
});

任何帮助将不胜感激!

Answer 1

感谢 Meteor Chef Slack channel 中的天才们(向 brajt、stephendayta 和 michelfloyd 致敬)，我才能够工作通过并传递正确的数据上下文。虽然有几个选项，但对我有用的一个是在空格标记内传递一个参数 this ，例如 {{activeOrg this}} ，然后在 helper 。

如果其他人遇到此问题，这里是更新的代码:

<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>

更新后的助手:

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'} : {};
  }
});

brajt 的另一个选项是使用 #each item in items 而不是 #each items。我之前曾尝试过，将 #each 变量内的实际按钮放入子模板中，但仍然无法传递数据上下文。