将嵌套的 JSON 绑定到 XML 视图

Posted 2023-02-27

【中文标题】将嵌套的 JSON 绑定到 XML 视图

【英文标题】：Binding nested JSON to XML View

【发布时间】：2018-01-09 14:57:12

【问题描述】：

这是我正在尝试制作的示例：

清单模型声明：

"models": 
   "caixas": 
        "type": "sap.ui.model.json.JSONModel",
        "uri": "Caixas.json"
    

Caixas.json 文件：

"Caixas": [
    
        "NomeCaixa": "PETROBRAS",
        "Valores": [
            
                "LabelValor": "Saldo Inicial",
                "ValorValor": 3520,
                "MoedaValor": "JPY"
            ,
            
                "LabelValor": "Entrada",
                "ValorValor": 3520,
                "MoedaValor": "JPY"
            
        ]
    ,
    
        "NomeCaixa": "PEBEM",
        "Valores": [
            
                "LabelValor": "Saldo Inicial",
                "ValorValor": 3520,
                "MoedaValor": "JPY"
            ,
            
                "LabelValor": "Entrada",
                "ValorValor": 3520,
                "MoedaValor": "JPY"
            
        ]
    
]

问题是：

我有一个SplitApp，其中母版页绑定到Caixas.json 文件的“Caixas”级别。这部分工作正常。

当我单击母版页选择一项时，详细信息页面应显示当前选择的“Caixas”的详细信息。这适用于属性“NomeCaixa”，因为它与“Caixas”级别直接相关。

问题是我想显示一个列表，其中包含所选 Caixa 的“Valores”数组中的数据。

如果我绑定到一个硬编码的“Caixas”，例如：

<List id="caixasList" 
      class="sapUiResponsiveMargin"
      headerText="Caixas" 
       
      mode="SingleSelectMaster"
      items="caixas>/Caixas/0/Valores">
    <items>
        <ObjectListItem title="banana" />
    </items>
</List>

它工作正常，但它总是会显示第一个“Caixas”“Valores”数组值。

我希望在元素List 的items 属性中写入一个路径，以便它在母版页上显示当前选择的“Caixas”的“Valores”数组值。

我尝试了几种使用 >/ 等的组合，还尝试查找此路径语法的综合指南，但无法获得任何帮助。

你能帮帮我吗？

【参考方案1】：

您需要通过“bindObject”将您的详细信息页面绑定到当前选择的“Caixas”对象。然后从现在开始，你就可以在详情页上定义相对绑定了，它看起来像这样：

items="caixas>Valores"

在这一行中，“caixas”表示模型的名称，而不是 JSON 源数据中的属性名称。

【参考方案2】：

只需尝试绑定到以下 .您的 JSON 是另一个列表中的列表。 绝对绑定第一个元素 caixas>/Caixas，然后只绑定相对的 caixas>Valores 而没有斜线。

<List id="caixasList" 
           class="sapUiResponsiveMargin"
           headerText="Caixas" 
            
           mode="SingleSelectMaster"
           items="caixas>/Caixas">

        <items>

            <List
               items="caixas>Valores"
            >
           <items>
              <ObjectListItem
                 title="caixas>LabelValor"

              </ObjectListItem>
          </items>
        </List>

        </items>

     </List>

【参考方案3】：

Plunker Concept

视图结构和交互应该是：

SplitApp，左侧有一个主页面，显示 Caixas 列表 SplitApp 为每个 caixa 提供一个 detailPage，其中包含其 Valores 列表 通过单击 masterPage 列表项，应用程序导航到具有 SplitApp 的相应详细信息页面。toDetail

要渲染所需的主页面和详细页面，请遍历 Caixas 数组： （实现草图，基于SplitApp Sample）：

Controller.js（部分）：

onInit: function() 
    var splitAppObj = this.byId("SplitAppDemo");
    var masterList = this.getView().byId('masterList');
    var caixa, page, list, listItem, valor;
    for (var i = 0; i < this._jsonModel.oData['Caixas'].length; i++) 
        caixa = this._jsonModel.oData['Caixas'][i];
        // Add item to master list
        listItem = new sap.m.StandardListItem(
            title: caixa['NomeCaixa'],
            type: "Active",
            customData: new sap.ui.core.CustomData(key: 'to', value: 'page' + i)
        );
        masterList.addItem(listItem);
        // Create and add detail page with list content
        page = new sap.m.Page(
            id: this.createId('page' + i), title: caixa['NomeCaixa']);
        list = new sap.m.List();
        for (var j = 0; j < caixa['Valores'].length; j++) 
            valor = caixa['Valores'][j];
            listItem = new sap.m.StandardListItem(
                title: valor['LabelValor']
            );
            list.addItem(listItem);
        
        page.addContent(list);
        splitAppObj.addDetailPage(page);
    
,
onListItemPress: function(oEvent) 
    var sToPageId = oEvent.getParameter("listItem")
        .getCustomData()[0].getValue();

    this.byId("SplitAppDemo").toDetail(this.createId(sToPageId));

View.xml（部分）：

<SplitApp id="SplitAppDemo" initialMaster="master">
    <detailPages></detailPages>
    <masterPages>
        <Page id="master" title="Master" icon="sap-icon://action">
            <content>
                <List id="masterList" itemPress="onListItemPress">
                    <items></items>
                </List>
            </content>
        </Page>
    </masterPages>
</SplitApp>