SAPUI5绑定JSON模型来控制

Posted 2023-03-08

【中文标题】SAPUI5绑定JSON模型来控制

【英文标题】：SAPUI5 binding JSON model to control

【发布时间】：2016-05-24 10:55:31

【问题描述】：

我是一名 ABAPer，正在学习 SAPUI5。我正在通过splitApp控制练习主从应用。我一直在寻找这种例子，但没有找到。所以，我在这里写。如果可能，请指导我。

我正在使用本地 JSON 模型（名为 Products.json 的文件中的条目）。我有两个视图 first.xml 和 seconds.xml 分别是 master 和 detail。

在第一个视图中，我有一个列表，下面是在此列表的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" 是第二视图中的列表。我的问题是这些控件没有使用上面的代码更新。

【参考方案1】：

SAPUI5 开发人员指南包含Walkthrough tutorial 中的必要步骤。在 Master-Detail 的情况下，建议通过导航来执行此操作。

在你的 onItemSelect() 中，你可以使用这个 sn-p 导航到一个路由：

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)。

当然，您必须为您的应用程序设置路由和 component.js，但这也在演练中进行了描述。

示例应用程序可以从here（右上角，下载按钮）下载

【讨论】：

感谢 nistv4n。我之前已经完成了本教程。我想在没有路由器的情况下做到这一点，因为我想让它变得简单。

第一个控制器 onItemSelected: function(oEvent) var oSelectedItem = oEvent.getSource(); var oContext = oSelectedItem.getBindingContext("products"); var sPath = oContext.getPath(); sap.ui.getCore().AppContext.sPath = sPath; sap.ui.controller("sap.ui.demo.wt.controller.second").onBeforeRendering(); onBeforeRendering: function() sap.ui.getCore().AppContext.oPrdDetails.bindElement( path: sap.ui.getCore().AppContext.sPath, model: "products" );