根据sap.m.Select中的Selection更改bindingPath

Question

我是SAPUI5的新手，目前，我正在尝试理解bindingContext和context的含义和用法。

我们假设我有以下文件：

Years.json

{
  "FiscalYear": [
    {
      "Jahr": 2017,
      "JahrID": 2017,
      "AEIst": 400,
      "AEPlan": 200,
      "UEIst": 300,
      "UEPlan": 200,
      "EBITIst": 300,
      "EBITPlan": 400,
      "Umsatzkategorie": [
        {
          "Umsatzkategorie": "ABC",
          "AE": 2
        },
        {
          "Umsatzkategorie": "DEF",
          "AE": 3
        },
        {
          "Umsatzkategorie": "GHI",
          "AE": 6
        },
        {
          "Umsatzkategorie": "XYZ",
          "AE": 8
        }
      ],
      "FiscalYearPeriod": [
        {
          "Monat": "JAN.2017",
          "AEIst": 14,
          "UEIst": 11
        },
        {
          "Monat": "FEB.2017",
          "AEIst": 12,
          "UEIst": 32
        },
        {
          "Monat": "MAR.2017",
          "AEIst": 15,
          "UEIst": 10
        },
        {
          "Monat": "APR.2017",
          "AEIst": 18,
          "UEIst": 9
        },
        {
          "Monat": "MAI.2017",
          "AEIst": 19,
          "UEIst": 5
        },
        {
          "Monat": "JUN.2017",
          "AEIst": 20,
          "UEIst": 12
        },
        {
          "Monat": "JUL.2017",
          "AEIst": 13,
          "UEIst": 14
        },
        {
          "Monat": "AUG.2017",
          "AEIst": 10,
          "UEIst": 13
        },
        {
          "Monat": "SEP.2017",
          "AEIst": 7,
          "UEIst": 15
        },
        {
          "Monat": "OKT.2017",
          "AEIst": 9,
          "UEIst": 18
        },
        {
          "Monat": "NOV.2017",
          "AEIst": 8,
          "UEIst": 7
        },
        {
          "Monat": "DEZ.2017",
          "AEIst": 34,
          "UEIst": 20
        }
      ]
    },
    {
      "Jahr": 2018,
      "JahrID": 2018,
      "AEIst": 400,
      "AEPlan": 20022222222222,
      "UEIst": 300,
      "UEPlan": 200,
      "EBITIst": 300,
      "EBITPlan": 400,
      "Umsatzkategorie": [
        {
          "Umsatzkategorie": "ABC",
          "AE": 2
        },
        {
          "Umsatzkategorie": "DEF",
          "AE": 3
        },
        {
          "Umsatzkategorie": "GHI",
          "AE": 6
        },
        {
          "Umsatzkategorie": "XYZ",
          "AE": 8
        }
      ],
      "FiscalYearPeriod": [
        {
          "Monat": "JAN.2017",
          "AEIst": 14,
          "UEIst": 11
        },
        {
          "Monat": "FEB.2017",
          "AEIst": 12,
          "UEIst": 32
        },
        {
          "Monat": "MAR.2017",
          "AEIst": 15,
          "UEIst": 10
        },
        {
          "Monat": "APR.2017",
          "AEIst": 18,
          "UEIst": 9
        },
        {
          "Monat": "MAI.2017",
          "AEIst": 19,
          "UEIst": 5
        },
        {
          "Monat": "JUN.2017",
          "AEIst": 20,
          "UEIst": 12
        },
        {
          "Monat": "JUL.2017",
          "AEIst": 13,
          "UEIst": 14
        },
        {
          "Monat": "AUG.2017",
          "AEIst": 10,
          "UEIst": 13
        },
        {
          "Monat": "SEP.2017",
          "AEIst": 7,
          "UEIst": 15
        },
        {
          "Monat": "OKT.2017",
          "AEIst": 9,
          "UEIst": 18
        },
        {
          "Monat": "NOV.2017",
          "AEIst": 8,
          "UEIst": 7
        },
        {
          "Monat": "DEZ.2017",
          "AEIst": 34,
          "UEIst": 20
        }
      ]
    }
  ]
}

查看（只是我要改变的部分）：

<Select id="theList" forceSelection="false" change="onListSelect" selectedKey="{years>/FiscalYear/1/JahrID}" width="auto" items="{
                            path: 'years>/FiscalYear',
                            sorter: { path: 'Jahr' }
                        }" class="sapUiResponsiveMargin">
          <core:Item key="{years>Jahr}" text="{years>JahrID}" />
        </Select>


//... some more stuff

<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" frameType="TwoByOne" id="idtile" header="Auftragseingang Gesamt" subheader="Aktuell in EUR" press="press">
    <TileContent footer="YTD">
        <content>
            <NumericContent scale="M" indicator="Down" value="{years>/FiscalYear/1/AEPlan}" valueColor="Error" />
        </content>
    </TileContent>
</GenericTile>

控制器：

onListSelect: function(oEvent) {    
    var selectedItem = oEvent.getSource().getSelectedItem();    
    var context = selectedItem.getBindingContext("years"); //trying to get the binding path
    console.log(context);
    var oTile = this.getView().byId("idtile");
    //pseudocode:
    //get relevant tile (oTile in this case) and change the binding path of the numeric content value to something else

    oTile.setBindingContext(new sap.ui.model.Context("years", "/years>/FiscalYear/1/AEPlan"));

},

我想要实现的是以下情况：

根据sap.m.Select的选定值，我想调整上述图块的绑定路径。

例如：如果其绑定到节点2017并且用户在选择控件中选择2018，则应该从节点2018将块的数字内容的值调整为相关的值。

https://flpportal-p1942326342trial.dispatcher.hanatrial.ondemand.com/sites/digidash#dashboard3602-Display这是我想要实现的一个例子。

实际上我正在努力理解bindingContext和bindingPath。

我真的很感激，如果有人能为我提供上述案例的例子。希望这将提供对该案例的更好理解。

Answer 1

你需要做ElementBinding，这里是文档

• Tutorial theory
• Tutorial demo

我在这里从表格行中选择了一年的片段：bind values of specific array of a json model to a control in sapui5

你只需要使用Select'change'事件做同样的事情

EDIT

没试过，但我会改变这个：

onListSelect: function(oEvent) {    
    var selectedItem = oEvent.getParameter('selectedItem');
    var sPath = selectedItem.getBindingContext("years").getPath(); //This path will include the index of your selected year (e.g. /FiscalYear/1/)
    this.getView().byId("idtile").bindElement("years>" + sPath);
}

另一方面，如果你想在开始时进行元素绑定而不进行选择并绑定硬编码路径'/ FiscalYear / 1 /'。只需在生命周期中选择一个事件，并使用硬编码路径进行elemenet绑定。例如使用onInit

onInit: function() {
    this.getView().byId("idtile").bindElement("years>/FiscalYear/1/");
}

并在XML中创建绑定相对，因此它完成了元素绑定绑定的路径：

<NumericContent scale="M" indicator="Down" value="{years>AEPlan}" valueColor="Error" />