将json模型的特定数组的值绑定到sapui5中的控件 [英] bind values of specific array of a json model to a control in sapui5
本文介绍了将json模型的特定数组的值绑定到sapui5中的控件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对SAPUI5相当陌生，目前我正在努力处理json模型.
I am quite new to SAPUI5 and currently I am struggling with the json model.
让我们假设我具有以下.json文件:
Lets assume that I have the following .json file:
{
"Region": [{
"Region": "MEA",
"Year": [{
"Year": 2016,
"Monat": [{
"Monat": "Januar",
"AE": 5,
"UE": 1
}, {
"Monat": "Februar",
"AE": 10,
"UE": 2
}, {
"Monat": "März",
"AE": 15,
"UE": 3
}]
}, {
"Year": 2017,
"Monat": [{
"Monat": "Januar",
"AE": 20,
"UE": 4
}, {
"Monat": "Februar",
"AE": 25,
"UE": 5
}, {
"Monat": "März",
"AE": 30,
"UE": 6
}]
}]
}, {
"Region": "Amercias",
"Year": [{
"Year": 2016,
"Monat": [{
"Monat": "Januar",
"AE": 5,
"UE": 1
}, {
"Monat": "Februar",
"AE": 10,
"UE": 2
}, {
"Monat": "März",
"AE": 15,
"UE": 3
}]
}, {
"Year": 2017,
"Monat": [{
"Monat": "Januar",
"AE": 20,
"UE": 4
}, {
"Monat": "Februar",
"AE": 25,
"UE": 5
}, {
"Monat": "März",
"AE": 30,
"UE": 6
}]
}]
}]
}
我已经在manifest.json中定义了模型以全局访问(如果我正确理解的话).
I already defined the model in the manifest.json to access it globally (if I have understood that way correctly).
我想要实现的是以下内容: 我想通过构建所有月份的键"AE"的总和来构建2016年的MEA的总和区域.此笔金额应最终显示在图块上.我可以在平坦的层次结构中做到这一点，但是由于我在这里使用了2个节点(2016、2017)和父节点区域，因此我不确定如何导航特定年份.
What I want to achieve is the following thing: I want to build the sum Region for the value MEA for the year 2016 by building the sum of the key "AE" for all the months. This sum should be finally displayed on a tile. Iam able to do that in flat hierarchy, but since I am using 2 nodes here (2016, 2017) and the parent node region, I am not quite sure on how to navigate the specific year.
我在文档和此处的平台上阅读了有关getproperty部分的内容，这也许是解决我的问题的一种方法吗?如果有人有一个例子，那就太好了，所以我可以尝试自己实现.
I read something in the documentation and on this platform here about the getproperty part, is that maybe a way to solve my problem? Would be great if anyone has an example for that, so I can try to achieve it on my own.
推荐答案
即使您具有全局模型，也可以在运行时创建模型并将其绑定到某些视图.
Even though you have your global model, you can create models on run time and bind them to certain views.
无论如何进行总和，只需在您的关卡中浏览并使用格式化程序功能最后完成总和即可.
Anyway to do the sum, just navigate trough your levels and do the sum at the end with a formatter function.
这里有个例子:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap'
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'
data-sap-ui-xx-bindingSyntax='complex'></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View
controllerName="my.own.controller"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:f="sap.ui.layout.form"
xmlns="sap.m">
<VBox items="{/Region}">
<Panel headerText="Region: {Region}" content="{Year}">
<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="{Year} Profit" press="press">
<TileContent unit="Unit">
<NumericContent value="{path: 'Monat', formatter: '.mySumFormatter'}" valueColor="Critical" indicator="Up" />
</TileContent>
</GenericTile>
</Panel>
</VBox>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
mySumFormatter: function(aMonat){
var sum = 0;
for(var i=0; i<aMonat.length; i++){
console.log("ssss")
sum += aMonat[i].AE
}
return sum;
}
});
// instantiate the View
var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
// create some dummy JSON data
var data = {
"Region": [{
"Region": "MEA",
"Year": [{
"Year": 2016,
"Monat": [{
"Monat": "Januar",
"AE": 5,
"UE": 1
}, {
"Monat": "Februar",
"AE": 10,
"UE": 2
}, {
"Monat": "März",
"AE": 15,
"UE": 3
}]
}, {
"Year": 2017,
"Monat": [{
"Monat": "Januar",
"AE": 20,
"UE": 4
}, {
"Monat": "Februar",
"AE": 25,
"UE": 5
}, {
"Monat": "März",
"AE": 30,
"UE": 6
}]
}]
}, {
"Region": "Amercias",
"Year": [{
"Year": 2016,
"Monat": [{
"Monat": "Januar",
"AE": 5,
"UE": 1
}, {
"Monat": "Februar",
"AE": 10,
"UE": 2
}, {
"Monat": "März",
"AE": 15,
"UE": 3
}]
}, {
"Year": 2017,
"Monat": [{
"Monat": "Januar",
"AE": 20,
"UE": 4
}, {
"Monat": "Februar",
"AE": 25,
"UE": 5
}, {
"Monat": "März",
"AE": 30,
"UE": 6
}]
}]
}]
};
// create a Model and assign it to the View
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
myView.setModel(oModel);
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap'
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'
data-sap-ui-xx-bindingSyntax='complex'></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View
controllerName="my.own.controller"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:f="sap.ui.layout.form"
xmlns="sap.m">
<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="{/Region/0/Region} {/Region/0/Year/0/Year} Profit">
<TileContent unit="Unit">
<NumericContent value="{path: '/Region/0/Year/0/Monat', formatter: '.mySumFormatter'}" valueColor="Critical" indicator="Up" />
</TileContent>
</GenericTile>
<l:Grid spanLayout="XL6 L6 M6 S6">
<VBox items="{/Region}">
<List headerText="{Region}" items="{Year}" mode="SingleSelectMaster" selectionChange="onItemSelected">
<StandardListItem title="{Year}"></StandardListItem>
</List>
</VBox>
<Panel id="myPanelForSelection" headerText="Selected Region/Year">
<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="{Year} Profit">
<TileContent unit="Unit">
<NumericContent value="{path: 'Monat', formatter: '.mySumFormatter'}" valueColor="Critical" indicator="Up" />
</TileContent>
</GenericTile>
</Panel>
</l:Grid>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
onItemSelected: function(oEvent){
var sPath = oEvent.getParameter("listItem").getBindingContext().getPath();
this.getView().byId("myPanelForSelection").bindElement(sPath)
},
mySumFormatter: function(aMonat){
if(aMonat){
var sum = 0;
for(var i=0; i<aMonat.length; i++){
console.log("ssss")
sum += aMonat[i].AE
}
return sum;
}
}
});
// instantiate the View
var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
// create some dummy JSON data
var data = {
"Region": [{
"Region": "MEA",
"Year": [{
"Year": 2016,
"Monat": [{
"Monat": "Januar",
"AE": 5,
"UE": 1
}, {
"Monat": "Februar",
"AE": 10,
"UE": 2
}, {
"Monat": "März",
"AE": 15,
"UE": 3
}]
}, {
"Year": 2017,
"Monat": [{
"Monat": "Januar",
"AE": 20,
"UE": 4
}, {
"Monat": "Februar",
"AE": 25,
"UE": 5
}, {
"Monat": "März",
"AE": 30,
"UE": 6
}]
}]
}, {
"Region": "Amercias",
"Year": [{
"Year": 2016,
"Monat": [{
"Monat": "Januar",
"AE": 5,
"UE": 1
}, {
"Monat": "Februar",
"AE": 10,
"UE": 2
}, {
"Monat": "März",
"AE": 15,
"UE": 3
}]
}, {
"Year": 2017,
"Monat": [{
"Monat": "Januar",
"AE": 20,
"UE": 4
}, {
"Monat": "Februar",
"AE": 25,
"UE": 5
}, {
"Monat": "März",
"AE": 30,
"UE": 6
}]
}]
}]
};
// create a Model and assign it to the View
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
myView.setModel(oModel);
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
这篇关于将json模型的特定数组的值绑定到sapui5中的控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
