Question

我正在使用包含sinpleform的网格来查看来自JSON模型的数据。 JSON模型以mysettings命名。 goToScene(route) { this.navigator.push(route); setTimeout(()=>{ this.navigator.immediatelyResetRouteStack([route]); }, 800); }

网格如下所示

oView.setModel(this.models.mysettings, 'mysettings');

JSON模型是

<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core"
xmlns="sap.m">

<Page>
<l:Grid
    defaultSpan="L12 M12 S12"
    width="auto">
    <l:content>
        <f:SimpleForm
            minWidth="1024"
            maxContainerCols="2"
            editable="false"
            layout="ResponsiveGridLayout"
            labelSpanL="3"
            labelSpanM="3"
            emptySpanL="4"
            emptySpanM="4"
            columnsL="1"
            columnsM="1"
            content="{mysettings>/settings/Group/0/Parameters}">
            <f:content>
                <Label text="{mysettings>OneOfTheKeys}" />
                <Input value="{mysettings>TheCorrespondingValue}" />
            </f:content>
        </f:SimpleForm>
    </l:content>
</l:Grid>
</Page>
</mvc:View>

如何使用databindig获取具有给定JSON模型的the linked example at the end中的简单形式的视图？没有给出键值对的数量。

Answer 1

AFAIK绑定多个聚合时需要一个数组。而你实际上绑定了一个普通的对象。

将模型（如果可能）更改为

{
    "settings": {
        "Group": [
            {
                "Parameters": 
                [
                    { key:"key1", value: "value1"},
                    { key:"key2", value: "value2"},
                    { key:"key3", value: "value3"},
                          ...,
                          ...
                ],
                "Name": "TheName"
            }
        ]
    }   
}

或者使用格式化程序函数将对象转换为数组

content="{ parts: [ 'mysettings>/settings/Group/0/Parameters' ], formatter :'.myFunctionToArray' }"

然后绑定到

<f:content>
    <Label text="{mysettings>key}" />
    <Input value="{mysettings>value}" />
</f:content>

Answer 2

取消聚合绑定，而是将每个值与完整地址绑定（绝对路径 + 相对路径）：

<form:SimpleForm class="formHiddenTitle" editable="false" layout="ResponsiveGridLayout" labelSpanM="12" labelSpanL="12" labelSpanXL="12" columnsM="4" columnsL="4">
  <core:Title/>
  <m:Label class="sapUiTinyMarginTop" design="Bold" text="Work Order Number" />
  <m:Text text="{/WorkOrderSet/Work Order Number}" />
  <m:Label class="sapUiMediumMarginTop" design="Bold" text="Category" />
  <m:Text text="{/WorkOrderSet/Category}" />
  <m:Label class="sapUiMediumMarginTop" design="Bold" text="Travel Time" />
  <m:Text text="{/WorkOrderSet/Travel Time}" />

  <core:Title/>
  <m:Label class="sapUiTinyMarginTop" design="Bold" text="Call Date" />
  <m:Text text="{/WorkOrderSet/Call Date}" />
  <m:Label class="sapUiMediumMarginTop" design="Bold" text="Service" />
  <m:Text text="{/WorkOrderSet/Service}" />
  <m:Label class="sapUiMediumMarginTop" design="Bold" text="Work Time" />
  <m:Text text="{/WorkOrderSet/Work Time}" />

  <core:Title/>
  <m:Label class="sapUiTinyMarginTop" design="Bold" text="Invoice Number" />
  <m:Text text="{/WorkOrderSet/Invoice Number}" />
  <m:Label class="sapUiMediumMarginTop" design="Bold" text="Issues Found" />
  <m:Text text="{/WorkOrderSet/Issues Found}" />

  <core:Title/>
  <m:Label class="sapUiTinyMarginTop" design="Bold" text="Invoice Date" />
  <m:Text text="{/WorkOrderSet/Invoice Date}" />
  <m:Label class="sapUiMediumMarginTop" design="Bold" text="Technician" />
  <m:Text text="{/WorkOrderSet/Technician}" />
</form:SimpleForm>

这样您就可以使用 Title/Toolbar 进行分组并能够绑定每个值。完成此操作后，绑定 Label 应该没有问题

ui5中simpleform的数据绑定

2 个答案: