如何为后端 Salesforce Cloud 上的每个请求添加加载微调器
How do I add a loading spinner for every request on backend Salesforce Cloud
我想要某种拦截器或显示对服务器发出的每个请求的加载微调器的东西,我正在寻找的是它的最通用形式。我目前有一个微调器组件,其中包含视图和控制器,但我只是想知道如何为每个 http 请求制作这个通用组件,可能在 header 或其他地方将其显示到视图中。
这是视图部分:
<aura:component >
<aura:attribute name="visible" type="Boolean" default="false"/>
<div class="{!if(v.visible, '', 'slds-hide')}">
<div class="slds-spinner_container">
<div role="status" class="slds-spinner slds-spinner_medium">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</div>
我应该以某种方式向控制器添加一些逻辑以供其他控制器调用它,但我只是不知道也不太确定什么是最好的方法!
例如,我有一些控制器可以调用服务器,我想在发生此类操作时以某种方式自动显示加载微调器:
doInit : function(component, event, helper)
{
var getTeamAction = component.get("c.getCurrentUserTeam");
getTeamAction.setCallback(this, function(response) {
if(response)
{
var t= response.getReturnValue();
component.set("v.millTeamMembers", t);
}
else
{
console.log("Unable to getteam");
}
});
$A.enqueueAction(getTeamAction);
}
使用这个,每当你调用服务器调用 doShowModalProcessing(comp) 方法并在获得响应后调用 doHideModalProcessing(comp)。
标记:
<div aura:id="modalProcessing" class="busy-backdrop busy-backdrop--open hideDiv">
<div class="slds-spinner--brand slds-spinner slds-spinner--large" aria-hidden="false" role="alert">
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
帮手:
doShowModalProcessing : function(component) {
var modal = component.find("modalProcessing");
$A.util.removeClass(modal, 'hideDiv');
},
doHideModalProcessing : function(component) {
var modal = component.find("modalProcessing");
$A.util.addClass(modal, 'hideDiv');
},
CSS:
.THIS.hideDiv {
display: none;
}
我想要某种拦截器或显示对服务器发出的每个请求的加载微调器的东西,我正在寻找的是它的最通用形式。我目前有一个微调器组件,其中包含视图和控制器,但我只是想知道如何为每个 http 请求制作这个通用组件,可能在 header 或其他地方将其显示到视图中。
这是视图部分:
<aura:component >
<aura:attribute name="visible" type="Boolean" default="false"/>
<div class="{!if(v.visible, '', 'slds-hide')}">
<div class="slds-spinner_container">
<div role="status" class="slds-spinner slds-spinner_medium">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</div>
我应该以某种方式向控制器添加一些逻辑以供其他控制器调用它,但我只是不知道也不太确定什么是最好的方法!
例如,我有一些控制器可以调用服务器,我想在发生此类操作时以某种方式自动显示加载微调器:
doInit : function(component, event, helper)
{
var getTeamAction = component.get("c.getCurrentUserTeam");
getTeamAction.setCallback(this, function(response) {
if(response)
{
var t= response.getReturnValue();
component.set("v.millTeamMembers", t);
}
else
{
console.log("Unable to getteam");
}
});
$A.enqueueAction(getTeamAction);
}
使用这个,每当你调用服务器调用 doShowModalProcessing(comp) 方法并在获得响应后调用 doHideModalProcessing(comp)。
标记:
<div aura:id="modalProcessing" class="busy-backdrop busy-backdrop--open hideDiv">
<div class="slds-spinner--brand slds-spinner slds-spinner--large" aria-hidden="false" role="alert">
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
帮手:
doShowModalProcessing : function(component) {
var modal = component.find("modalProcessing");
$A.util.removeClass(modal, 'hideDiv');
},
doHideModalProcessing : function(component) {
var modal = component.find("modalProcessing");
$A.util.addClass(modal, 'hideDiv');
},
CSS:
.THIS.hideDiv {
display: none;
}