Meteor：根据数据上下文禁用按钮？答案

【问题标题】：Meteor: Disable button based on data context?Meteor：根据数据上下文禁用按钮？
【发布时间】：2016-02-02 16:41:25
【问题描述】：

我有一个多租户 Meteor 应用，并希望允许有权访问多个组织帐户的用户在组织之间切换。

切换组织的功能正在工作，但我现在希望能够为用户当前的组织禁用button，这样他们就无法切换到他们已经在的同一个组织。

现在我正在尝试根据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'} : {};
  }
});

任何帮助将不胜感激！

【问题讨论】：

标签： meteor

【解决方案1】：

感谢 Meteor Chef Slack 频道的天才们（向 brajt、stephendayta 和 michelfloyd 致敬），我得以工作通过并传递正确的数据上下文。虽然有几个选项，但对我有用的一个是在空格键标签内传递一个参数 this，例如 {{activeOrg this}}，然后在帮助程序中获取它。

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

<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 变量中的实际按钮放入子模板中，但仍然无法传递数据上下文。

【讨论】：