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

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

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

Answer 2

如果你想绑定一个文本框（

<Text text="..." id="sample"/>

）你必须使用

bindProperty()

var path = oEvent.oSource.oBindingContexts.modelName.sPath;
var item = this.byId("sample");
item.bindProperty("text", `modelName>${path}/Name` );

oBindingContext 的替代方案是：

oEvent.oSource.getBindingContext("modelName").sPath

在bindProperty中，您必须添加属性的名称（/Name、/Size、/Price）。在此示例中，我使用带反引号的模板字符串。 另一种方式：

var bindingPath = "modelName>" + path + "/Name"
item.bindProperty("text", bindingPath);