SAPUI5 多重聚合绑定

Question

作为初始数据集，我有一个 XML 列表，可以有多个子列表。应使用 SAPUI5 动态设置此列表。 1. 第一个列表应该是一个 SAPUI5 列表，它应该显示名称。 2. 然后选择值应该显示为 SAPUI5 SegmentedButtons。 3. 当用户按下 SegmentedButton 的最后一个按钮时，下拉列表应显示匹配的子值。

我在 XML.view 中完成了前两点。这很好用。但我没有填写下拉列表。如何填写下拉列表？

此外，还有两种不同的类型。如果类型为 "qualitative"，则用户将获得显示的 SegmentedButtons。如果是 "quantitative" 类型，用户只会得到一个空的输入字段。

See here for Sample Image

数据集

<?xml version="1.0" encoding="UTF-8"?>
<Rowsets>
     <Rowset>
         <Row>
             <Name>Taste</Name>
             <Type>qualitative</Type>
             <ID>1</ID>
             <Selection>
                <Row><Value>good</Value></Row>
                <Row><Value>acceptable</Value></Row>
                <Row><Value>unacceptable</Value></Row>
            </Selection>
         </Row>
         <Row>
             <Name>Smell</Name>
             <Type>qualitative</Type>
             <ID>2</ID>
             <Selection>
                <Row><Value>good</Value></Row>
                <Row><Value>unacceptable</Value>
                    <Selection>
                        <Row><Subvalue>like fish</Subvalue></Row>
                        <Row><Subvalue>like socks</Subvalue></Row>
                    </Selection>
                </Row>
            </Selection>
         </Row>
         <Row>
             <Name>Weight</Name>
             <Type>quantitative</Type>
             <ID>3</ID>
         </Row>
         <Row>
             <Name>Appearance</Name>
             <Type>qualitative</Type>
             <ID>4</ID>
             <Selection>
                <Row><Value>good</Value></Row>
                <Row><Value>acceptable</Value></Row>
            </Selection>
         </Row>
     </Rowset>
</Rowsets>

main.view.xml

<List 
id="List"
headerText="List" 
items="{Result>/Rowset/Row/}" >
<InputListItem label="{Result>Name}">

    <SegmentedButton selectedButton="none" items="{Result>Selection/Row/}" visible="{= ${Result>Type} === 'qualitative' }">
        <items>
            <SegmentedButtonItem key="{Result>Value}" text="{Result>Value}" />
        </items>
    </SegmentedButton>

    <Select
        visible="{= ${Result>Type} === 'qualitative' }" 
        items="{Result>Selection/Row/Selection/Row/}">
        <core:Item key="{Result>Subvalue}" text="{Result>Subvalue}" />
    </Select>

    <Input value="" visible="{= ${Result>Type} === 'quantitative' }" />
</InputListItem>

Answer 1

您需要针对 Segmented Button "SelectionChange" 事件上的 Select 控件执行 ElementBinding。这将更改 Select 控件的所有绑定引用，因此 "visible" 条件将失败。所以你需要在事件中手动设置为"true"或"false"。但我认为这不是问题，因为如果用户在分段按钮中进行了选择，那是因为它是 "qualitative".

因此片段 here

  <List 
    id="List"
    headerText="List" 
    items="{Result>/Rowsets/Rowset/Row}" >
    <InputListItem label="{Result>Name}">

        <SegmentedButton selectedButton="none" items="{path:'Result>Selection/Row', templateShareable: true}" visible="{= ${Result>Type} === 'qualitative' }" selectionChange="onSegBtnSelected">
            <items>
                <SegmentedButtonItem key="{Result>Value}" text="{Result>Value}" />
            </items>
        </SegmentedButton>

        <Select
            visible="{= ${Result>Type} === 'qualitative'}" 
            items="{path:'Result>', templateShareable: true}">
            <core:Item key="{Result>Subvalue}" text="{Result>Subvalue}" />
        </Select>

        <Input value="" visible="{= ${Result>Type} === 'quantitative' }" />
    </InputListItem>
  </List>

这里是事件处理程序

  onSegBtnSelected(oEvent){
    var oSegBtn = oEvent.getParameters().item;
    var oBindingPath = oSegBtn.getBindingContext("Result").getPath();
    if(this.getView().getModel("Result").getProperty(oBindingPath + "/Selection")){
      var oSelect = oEvent.getSource().getParent().getContent()[1];
      oSelect.bindElement("Result>" + oBindingPath + "/Selection/Row");
      oSelect.setVisible(true);
    }
  }

SAPUI5 多重聚合绑定

SAPUI5 multiple Aggregation Binding

xml

binding

view

aggregation

sapui5