SAPUI5中的路由:如何实现URL的传递？模型数据未初始加载

Question

我的目标是编写具有路由支持的SAPUI5 Fiori应用程序.一个邮件目标是拥有可通过的URL.例如,在"请批准此链接 " 的电子邮件中.该链接是我的rounting配置匹配的URL,例如index.html#/applicants/8.

我使用了一种典型的sap.m.SplitApp类应用程序.单击masterview中的列表项会将URL更改为index.html#/applicants/[id of entry in JSON].我可以点击列表,我定义的路线匹配,应用程序按预期加载(申请人)数据.

然而,这就是我的问题,这个doeas在直接使用URL时会起作用,比如粘贴[my url]/index.html#/applicants/8到我的浏览器中.该应用程序已启动,但未加载任何详细数据.我必须再次点击另一个列表项来获取数据.

实际上,在传递URL时调用控制器,但似乎模型未启动且未定义.我的JSON模型绑定在createContent我的函数中Component.js

//更新2015-05-14问题似乎与getData()功能有关.我有模型,它有条目,但getData()第一次加载我的应用程序时返回undefined.我最近阅读的getData()内容已被弃用.我应该如何改进下面的编码？

// Component.js
ui5testing.Component.prototype.createContent = function(){
  // create root view
  var oView = sap.ui.view({
    id : "app",
    viewName : "ui5testing.view.Main",
    type : "JS",
    viewData : {
        component : this
    }
  var oModel = new sap.ui.model.json.JSONModel("model/mock_applicants.json");
  oView.setModel(oModel);
  [...]
  return oView;
});
// Master controller
handleApplicantSelect : function (evt) {
    var oHashChanger = sap.ui.core.routing.HashChanger.getInstance();
    var context  = evt.getParameter("listItem").getBindingContext();
    var path = context.getPath();
    var model = this.getView().getModel();
    var item =  model.getProperty(path);
    oHashChanger.setHash("applicants/" + item.id);
},

// Detail controller
onInit: function() {
    this.router = sap.ui.core.UIComponent.getRouterFor(this);
    this.router.attachRoutePatternMatched(this._handleRouteMatched, this);
},

_handleRouteMatched : function(evt){        
    var objectId = evt.getParameter("arguments").id;
    var model = this.getView().getModel();
    var data = model.getData()["applicants"];
    var pathId;

    if (data) {
        for (var i = 0; data.length; i++) {
            if ( objectId == data[i].id ) {
                pathId = i;
                break;
            }
        }

        var sPath = "/applicants/" + pathId;

        var context = new sap.ui.model.Context(model, sPath)
        this.getView().setBindingContext(context);              
    }
},

Answer 1

正如您所发现的， getData() 第一次返回 undefined ，这意味着模型数据尚未加载。因此，您可以利用模型的 AttachRequestCompleted 方法并从组件触发事件并在详细控制器中侦听该事件，以确保仅在加载数据后才执行 routerPatternMatched() 。

//组件.js

var oModel = new sap.ui.model.json.JSONModel("model/mock_applicants.json");

oModel.attachRequestCompleted(jQuery.proxy(function(){
   this.fireEvent("MockDataLoaded"); // fireEvent through component
},this));

oView.setModel(oModel);

//细节控制器

onInit : function(){

this.router = sap.ui.core.UIComponent.getRouterFor(this);  

var oComponent = this.getOwnerComponent();

oComponent.attachEvent("MockDataLoaded",jQuery.proxy(function(){
   this.router.attachRoutePatternMatched(this._handleRouteMatched, this);
},this));

}

或者最简单但肮脏的方法是发出同步请求而不是异步请求来加载数据。

var oModel = new sap.ui.model.json.JSONModel();

oModel.loadData(""model/mock_applicants.json",{bAsync:false});

oView.setModel(oModel);