SAPUI5绑定从组合框控件到快速查看弹出窗口的路径

SAPUI5 Bind path from combobox control to a quickview popup

本文关键字：窗口 路径 绑定 组合 控件 SAPUI5      更新时间：2024-04-30

我在XML视图中有一个组合框和一个单独的按钮。按下按钮事件调用QuickView控件。问题是，我无法从组合框的选定绑定路径填充QuickView的数据。

组合框的项目位于一个json文件中。

<ComboBox id="person" showSecondaryValues="true" 
          items="{persons>/Persons}">
            <items>
                <core:Item key="{persons>ID}" text="{persons>Name}"/>
            </items>
</ComboBox>
<Button icon="sap-icon://personnel-view" press="onPersonnelView"/>

清单中声明的json文件是：

{    
"Persons": [
{
  "ID": "id01",
  "Name": "name",
  "Roles": "role",
  "Mobile": "555",
  "Phone": "555",
  "Email": "info@info.info",
  "Address": "address 99",
  "CompanyID": "cid01"
}]}

清单部分：

    "models": {
        "persons": {
            "type": "sap.ui.model.json.JSONModel",
            "uri": "TestData/persons.json"
         }

组合框的效果很有魅力，与"人物"模型的绑定似乎很好。

我的控制器看起来像：

sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("my.app.controller.Form", {
 onPersonnelView: function(oEvent) {
        this._openQuickView(oEvent);
    },
    _openQuickView: function(oEvent) {
        this._createPopover();
        var oButton = oEvent.getSource();
        jQuery.sap.delayedCall(0, this, function () {
            this._oQuickView.openBy(oButton);
        });
    },
    _createPopover: function() {
        if (!this._oQuickView) {
            this._oQuickView = sap.ui.xmlfragment("my.app.view.PersonnelQuickView", this);
            this.getView().addDependent(this._oQuickView);
        }
    }
});
});

快速视图显示了自己，但它是空的。

您需要将QuickViewPage绑定到模型中的特定条目。

为此，需要获取所选组合框条目的绑定路径，并将其用作QuickViewPage的绑定上下文。

onPersonnelView: function(oEvent) {
    var item = this.byId("person").getSelectedItem();
    if (!item) {
        return;
    }
    var path = item.getBindingContext("persons").getPath();
    this._createPopover("persons>" + path);
    var oButton = oEvent.getSource();
    jQuery.sap.delayedCall(0, this, function () {
        this._oQuickView.openBy(oButton);
    });
},
_createPopover: function(path) {
    if (!this._oQuickView) {
        this._oQuickView = sap.ui.xmlfragment("my.app.view.PersonnelQuickView", this);
        this.getView().addDependent(this._oQuickView);
    }
    this._oQuickView.bindElement(path);
 }
相关文章：