Meteor:根据数据上下文禁用按钮?
[英] Meteor: Disable button based on data context?
本文介绍了Meteor:根据数据上下文禁用按钮?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个多租户 Meteor 应用，希望允许访问多个组织帐户的用户在组织之间切换.
切换组织的功能正在发挥作用，但我现在希望能够禁用用户当前组织的按钮，这样他们就无法切换到他们已经所在的组织.
现在我正在尝试根据 data-domain 属性检索每个按钮的值，但它返回 undefined.此外，console.log(this); 以 undefined 的形式返回给 helper.
如何获取数据上下文以将当前按钮的值与用户的当前组织相匹配?
这是模板:
<div class="modalfade switchAccounts" id="switchAccounts" tabindex="-1"角色="对话框" 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"咏叹调标签=关闭"><span aria-hidden="true">×</span><h4 class="modal-title">选择一个组织</h4>
<div class="modal-body"><div class="list-group">{{#每个组织}}<!-- {{activeOrg}} 如果这等于用户的当前组织.--><button type="button" class="list-group-item switchAccount"data-domain="{{this}}" {{activeOrg}}>{{this}}{{/每个}}
这里是帮手:
Template.switchAccountsModal.helpers({组织:() =>{var组织 = Meteor.user().organizations;console.log('组织:' + 组织);回归组织；},activeOrg: () =>{console.log('activeOrg.this: ' + this);var currentOrg = Meteor.user().profile.currentOrg;var thisOrg = $(this).data('domain');console.log('activeOrg.thisOrg:' + thisOrg);返回 (this == currentOrg) ?{禁用:'禁用'}:{}；}});
任何帮助将不胜感激！
解决方案
感谢 Meteor Chef Slack 频道中的天才们(向 brajt、stephendayta &michelfloyd)，我能够处理并传递正确的数据上下文.虽然有几个选项，但对我有用的一个是在空格键标签内传递一个参数 this 像 {{activeOrg this}} 然后在帮手.
如果其他人遇到此问题，这里是更新后的代码:
<div class="modalfade switchAccounts" id="switchAccounts" tabindex="-1"角色="对话框" 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"咏叹调标签=关闭"><span aria-hidden="true">×</span><h4 class="modal-title">选择一个组织</h4><div class="modal-body"><div class="list-group">{{#每个组织}}<button type="button" class="list-group-item switchAccount"{{activeOrg this}}>{{这}}{{/每个}}
以及更新的助手:
Template.switchAccountsModal.helpers({组织:() =>{var组织 = Meteor.user().organizations;归还组织；},activeOrg: (org) =>{让 currentOrg = Meteor.user().profile.currentOrg,thisOrg = 组织；返回 (currentOrg === thisOrg) ?{禁用:'禁用'}:{}；}});
brajt 的另一个选项是使用 #each item in items 而不是 #each items.我之前尝试过，将 #each 变量中的实际按钮放入子模板中，但仍然无法传递数据上下文.
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">×</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!
解决方案
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">×</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.
这篇关于Meteor:根据数据上下文禁用按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
