将嵌套的 JSON 绑定到 XML 视图答案

【问题标题】：Binding nested JSON to XML View将嵌套的 JSON 绑定到 XML 视图
【发布时间】：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" 
      width="auto" 
      mode="SingleSelectMaster"
      items="{caixas>/Caixas/0/Valores}">
    <items>
        <ObjectListItem title="banana" />
    </items>
</List>

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

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

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

你能帮帮我吗？

【问题讨论】：

标签： json xml view sapui5

【解决方案1】：

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

items="{caixas>Valores}"

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

【讨论】：

【解决方案2】：

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

<List id="caixasList" 
           class="sapUiResponsiveMargin"
           headerText="Caixas" 
           width="auto" 
           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>

【讨论】：