我是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。
我真的很感激,如果有人能为我提供上述案例的例子。希望这能够更好地理解这种情况。
答案 0 :(得分:0)
你需要做ElementBinding,这里是文档
我制作了一个片段,从表格行中选择一年:bind values of specific array of a json model to a control in sapui5
你只需要使用选择'更改'事件
来做同样的事情没试过,但我会改变这个:
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" />