SAPUI5绑定JSON模型进行控制

Question

我是ABAPer，正在学习SAPUI5 。 我正在通过splitApp控件练习主从应用程序。 我一直在搜索这种示例，但没有找到任何示例。 所以，我在这里写。 如果可以的话请指导我。

我正在使用本地JSON模型（在名为Products.json的文件中输入）。 我有两个视图first.xml和seconds.xml分别是主视图和详细视图。

在第一个视图中，我有一个列表，下面是此列表的onItemSelect事件中编写的代码

var oSelectedItem = oEvent.getSource();
var oContext = oSelectedItem.getBindingContext("products");
var sPath = oContext.getPath();
var oPrdDetails = sap.ui.xmlview("view.second").byId("prdDetails");
oPrdDetails.bindElement({ path: sPath, model: "products" });

var oListDetails = sap.ui.xmlview("view.second").byId("listDetails");
oListDetails.bindElement({ path: sPath, model: "product2" });

Id="prdDetails"是第二视图中的面板， Id="listDetails"是第二视图中的列表。 我的问题是这些控件无法使用上述代码进行更新。

Answer 1

《 SAPUI5开发人员指南》包含演练教程中的必要步骤。 如果是“主从细节”，建议通过导航来完成。

在onItemSelect（）中，您可以使用以下代码段导航至路线：

var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("detail", {
    invoicePath:     oItem.getBindingContext("invoice").getPath().substr(1)
});

在详细信息视图中，您必须订阅模式匹配事件，如下所示：

oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);

当请求正确的URL哈希时，框架将调用指定的this._onObjectMatched ：

_onObjectMatched: function (oEvent) {
    this.getView().bindElement({
        path: "/" + oEvent.getParameter("arguments").invoicePath,
        model: "invoice"
    });
}

如果将元素绑定到UI，则可以相对地将属性分配给视图中的控件（{propName}）。

当然，您必须为您的应用程序设置routing和component.js，但这也将在本演练中进行介绍。

可以从此处下载示例应用程序（右上角，“下载”按钮）