Sapui5 切换页面时如何设置忙指示灯?
我有一个2页的SAPUI5应用程序。当我点击一个按钮时,它从后端获取数据,然后进入下一页显示数据。根据数据量的不同,这可能需要一些时间,因此我想在页面之间添加一个繁忙指示器,这样看起来第一页就不会冻结。问题是,在第二页加载之前,忙碌指示器不会显示,这不是我想要的 这是我的第一个页面控制器的代码示例,我在其中调用忙指示器Sapui5 切换页面时如何设置忙指示灯?,sapui5,busyindicator,Sapui5,Busyindicator,我有一个2页的SAPUI5应用程序。当我点击一个按钮时,它从后端获取数据,然后进入下一页显示数据。根据数据量的不同,这可能需要一些时间,因此我想在页面之间添加一个繁忙指示器,这样看起来第一页就不会冻结。问题是,在第二页加载之前,忙碌指示器不会显示,这不是我想要的 这是我的第一个页面控制器的代码示例,我在其中调用忙指示器 onButtonPress: function(){ //code to grab input data var errorsFound = this.checkData
onButtonPress: function(){
//code to grab input data
var errorsFound = this.checkData();
if(errorsFound)
//code to show errors here
else{
var BI = new sap.m.BusyDialog();
BI.open();
this.processData(); //call function to make ajax call to backend and get data
this.getOwnerComponent().getRouter().navTo("page2");
}
},
checkData: function(){
//check data for errors;
return errorsFound;
}
在我的第二页我有这个
onInit: function(){
var route = sap.ui.core.UIComponent.getRouterFor(this);
route.getRoute("page2").attachMatched(this.initController, this);
}
initController: function(){
//here I have code to grab the data that came back and I set model to display it
//Dialog doesn't show up until the app hits comes around this point.
}
不知道如何使这项工作,繁忙的指标将不会出现,直到下一页出现。我甚至尝试使用这个示例中的xml片段,得到了相同的结果。
任何关于如何正确操作的建议都将不胜感激。我认为你做得不对。首先,浏览第二页,然后加载数据。这将简化你的应用程序,整个过程将感觉更加自然 我看到你正在使用路由器,如果你依赖于一个特定的变量,你可能想把它修改为包含一个路由参数。如果您在清单中设置了它们,它将类似于: manifest.json 在控制器中,按如下方式导航: page1.controller.js 您将发现该参数已准备好用于数据绑定或匹配模式事件中的任何其他内容(请注意此处函数的更改) page2.controller.js 在这种情况下,回调包含您的参数: page2.controller.js
这种方法的额外好处是,您可以直接导航到
myapp#/page2/my unique id
,它只需加载所有内容,而无需依赖第1页上的按钮 尝试将busy属性绑定到应用程序控件,并将其默认设置为false,并根据需要动态设置true或false。尽量保持简单(不应用于特定页面)。我尝试过这样做,但无法使其工作。我认为问题似乎出在ajax调用上。我让它是同步的,而不是异步的。这会导致等待指示器显示的时间更长。不知道为什么。但是如果我将ajax调用设置为async,那么指示器将在正确的时间显示,问题是现在我无法按时获取页面上的数据。它尝试在数据返回之前呈现页面
"routes": [{
"pattern": "/page2/{parameter}",
"name": "page2",
"target": "page2"
}]
this.getOwnerComponent().getRouter().navTo("page2", {
parameter: "my-unique-id"
});
route.getRoute("page2").attachPatternMatched(this.initController, this);
initController: function(oEvent) {
var myParameter = oEvent.getParameter("arguments").parameter
// set the busy indicators and load your data here
}