Question

这是我尝试工作的例子：

清单模型声明：

"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，其母版页绑定到＆＃34; Caixas＆＃34; Caixas.json文件的级别。这部分正在运作。

当我点击母版页面选择其中一个项目时，详细信息页面应显示当前所选＆＃34; Caixas＆＃34;的详细信息。这适用于属性＆＃34; NomeCaixa＆＃34;，因为它与＆＃34; Caixas＆＃34;直接相关。水平。

问题是我想显示一个包含内部数据的列表＆＃34; Valores＆＃34;所选Caixa的数组。

如果我绑定了一个被诅咒的＆＃34; Caixas＆＃34;喜欢在：

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

它工作正常，但它总会显示第一个＆＃34; Caixas＆＃34; ＆＃34; VALORES＆＃34;数组值。

我希望在元素items的{{1}}属性中写一个路径，以便显示＆＃34; Valores＆＃34;当前所选＆＃34; Caixas＆＃34;的数组值在母版页上。

我已尝试使用List等多种组合，并尝试查找此路径语法的综合指南，但无法获得任何帮助。

你能帮帮我吗？

Answer 1

尝试绑定到以下内容。您的JSON是另一个列表中的列表。绝对绑定第一个元素{caixas＆gt; / Caixas}然后只绑定相对{caixas＆gt; 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>

Answer 2

您需要通过“ bindObject ”将您的详细信息页面绑定到当前选定的“Caixas”对象。然后从现在开始，您可以在详细信息页面上定义相对绑定，它将如下所示：

项= “{caixas＆GT; VALORES}”

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

Answer 3

Plunker Concept

视图结构和交互应该是：

SplitApp，左侧有一个mesterPage，显示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>

将嵌套的JSON绑定到XML视图

3 个答案: