SAPUI5 多重聚合绑定

Question

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

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

此外，还有两种不同的类型。如果类型是“定性的”，则用户会显示 SegmentedButtons。 如果是“定量”类型，用户只会得到一个空的输入框。

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

您需要对分段按钮“SelectionChange”事件上的 Select 控件执行 ElementBinding。这将更改 Select 控件的所有绑定引用，因此您的“可见”条件将失败。因此，您需要在事件中手动将其设置为“true”或“false”。但我认为这不是问题，因为如果用户在分段按钮中进行选择，那是因为它是“定性的”。

所以 sn-p 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);
    }
  }