首页 文章

切换页面时如何设置忙指示?

提问于
浏览
1

我有一个2页的SAPUI5应用程序 . 当我点击一个按钮时,它会从后端抓取数据,然后进入下一页以显示数据 . 这可能需要一些时间基于数据量,因此我想在页面之间添加忙碌指示器,因此它看起来不像第一页被冻结 . 问题是繁忙的指示器在第二页加载后才显示,这不是我想要的 .

这是我的第一个页面控制器的代码示例,我在其中调用忙指示符

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片段,并得到了相同的结果 . https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.BusyDialogLight/preview

关于如何做到这一点的任何指示将不胜感激 .

2 回答

  • 1

    我认为你做错了 . 首先,导航第二页,然后加载数据 . 这将简化您的应用程序,整个事情会感觉更自然 .

    我看到你正在使用路由器,如果你依赖于一个特定的变量,你可能想要改变它以包含路由参数 . 如果您在清单中设置它们,它看起来像:

    的manifest.json

    "routes": [{
        "pattern": "/page2/{parameter}",
        "name": "page2",
        "target": "page2"
    }]
    

    在您的控制器中导航如下:

    page1.controller.js

    this.getOwnerComponent().getRouter().navTo("page2", {
       parameter: "my-unique-id" 
    });
    

    您将找到准备好在数据绑定中使用的参数或匹配模式的事件中的任何其他内容(请注意此处函数的更改)

    page2.controller.js

    route.getRoute("page2").attachPatternMatched(this.initController, this);
    

    在这种情况下,回调有你的参数:

    page2.controller.js

    initController: function(oEvent) {
        var myParameter = oEvent.getParameter("arguments").parameter
    
        // set the busy indicators and load your data here
    }
    

    这种方法的额外好处是你可以直接导航到 myapp#/page2/my-unique-id ,它只会加载所有内容而不依赖于page1上的按钮 .

  • 1

    尝试将 busy 属性绑定到App控件,并将其默认设置为false,并根据您的要求动态设置true或false . 尽量保持简单(不应该用于特定页面 . )

相关问题