sapui5 - 如何根据ID生成动态列表?
问题描述
希望我能正确解释我的情况..所以我在 OpenUI5 的帮助下在家里开发一个食谱应用程序,用于内部目的。
我有几张收据的清单,它们都有一个唯一的 ID。因此,如果我想查看详细信息:
http://##URL##/myreceipts/#/detail/0
在详细信息部分,我想添加一个包含此收据所需物品的新列表。
所以我的 JSON 模型目前看起来如下:
{
"ReceiptCollection": [
{
"ID": 1,
"Name": "Spaghetti Bolognese",
"Category": "Kochen",
"Difficulty": "einfach",
"Description": "Schnell und Einfach",
"Preparation": "Das Hackfleisch würzen nach Geschmack (Salz, Pfeffer, Knoblauch, Paprika) und in etwas Öl anbraten. Tomatenmark, die Kräuter und gehackte Zwiebel unterrühren und mitbraten. Tomaten mit Saft dazugeben und ca. 45 Minuten köcheln lassen. Mit Salz, Pfeffer und etwas Zucker abschmecken. Milch dazugeben. Soße evtl mit etwas Speisestärke andicken. \n\n Spaghetti wie gewohnt in Salzwasser gar kochen.",
"Ingredients": [
{
"IngID": 1,
"IngName": "Hackfleisch",
"UnitNumber": 300,
"UnitOfMeasure": "Gramm"
}
]
},
[...]
在 Details.view 中,我这样尝试:
<m:Table id="ingredientsTable"
inset="false"
noDataText="{i18n>general.NoDataTextIngredients}"
items="{
path: 'receipts>/ReceiptCollection/0/Ingredients',
sorter: {
path: 'IngName'
}
}"
class="sapFDynamicPageAlignContent"
width="auto">
<m:columns>
<m:Column width="auto">
<m:Text text="{i18n>detail.Ingredient}" />
</m:Column>
<m:Column width="auto">
<m:Text text="{i18n>detail.Amount}" />
</m:Column>
<m:Column width="auto">
<m:Text text="{i18n>detail.UoM}" />
</m:Column>
</m:columns>
<m:items>
<m:ColumnListItem>
<m:cells>
<m:ObjectIdentifier title="{receipts>IngName}" />
<m:Text text="{receipts>UnitNumber}" />
<m:Text text="{receipts>UnitOfMeasure}" />
</m:cells>
</m:ColumnListItem>
</m:items>
</m:Table>
这显然是错误的,因为以下代码段:“路径:'receipts>/ReceiptCollection/0/Ingredients'”
有没有办法用 URL 中当前显示的 ID 0 替换 ID 0?
我需要在控制器中加载表格内容吗?还是只有一种简单的方法可以在视图中做到这一点?(所以在写这些行时,这似乎是错误的)。
但是如果我在控制器中填写表格 - 视图应该是什么样子?
我仍然是初学者,我正在尝试更多地了解这一点,所以请不要杀了我。:D
感谢您的帮助和最好的问候
解决方案
我假设您已经管理了导航并拥有模型中的数据索引。这是你要做的:
- 从视图中的表中删除项目聚合,使其如下所示:
<m:Table id="ingredientsTable"
inset="false"
noDataText="{i18n>general.NoDataTextIngredients}"
class="sapFDynamicPageAlignContent"
width="auto">
- 然后,从控制器进行绑定。我把它放在 onInit 事件中:
onInit: function () {
/*Ignore if model is set in manifest*/
var oModel = new sap.ui.model.json.JSONModel("./model/recipes.json");
this.getView().setModel(oModel, "receipts");
/*get the index from rourer using 0 for explanation */
var index=0;
var oTable = this.getView().byId("ingredientsTable");
/*Give the path you want to bind to items aggregation*/
var oItems = "receipts>/ReceiptCollection/" + index + "/Ingredients";
var oSorter = new sap.ui.model.Sorter('IngName');
/*Bind it to the items aggregation of the table */
oTable.bindItems(oItems, oTable.getItems()[0].clone(),oSorter);
}
希望这可以帮助
推荐阅读
- php - PHP time() 显示不正确的时间,一小时后
- python - python vs nodejs的https实现有什么不同?
- android - ADB devices 命令显示我的 Galaxy S10 5G 的空列表
- r - 使用 data.table 和自定义函数从字符串变量中提取变量
- python - 在 Docker 中运行带有挂载文件系统的本地 Python 程序
- android - 错误:尝试将静态成员放入卡片标题第 18 行时,只能在初始化程序中访问它
- python - 更改 python 模块并重新安装它 - 不应用更改
- python - 如何在python中的api分页循环后编写可读的csv文件
- html - 使用 CSS3 动画链接缩进
- mysql - MySQL:在最近的“最近”日期加入