首页 > 解决方案 > 如何根据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

感谢您的帮助和最好的问候

标签: sapui5

解决方案


我假设您已经管理了导航并拥有模型中的数据索引。这是你要做的:

  1. 从视图中的表中删除项目聚合,使其如下所示:

<m:Table id="ingredientsTable"
                   inset="false"
                   noDataText="{i18n>general.NoDataTextIngredients}"
                   class="sapFDynamicPageAlignContent"
                   width="auto">

  1. 然后,从控制器进行绑定。我把它放在 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);
		}

希望这可以帮助


推荐阅读