SAPUI5绑定JSON模型来控制

Question

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

Answer 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（右上角，下载按钮）下载