是否可以基于父元素在 SAPUI5 中进行一些条件绑定？

Question

我有一个 XML 片段并在 XML 视图中的多个地方使用它，如下所示：

<IconTabFilter text="ABC" key="1" icon="sap-icon://alphabetical-order">
    <content>
        <Table id="table1" width="auto" items="{path:'/ContactSet',parameters:{expand:'BusinessAddress,HomeAddress,OtherAddress,Photo'},filters:[{path:'Surname',operator:'StartsWith',value1:'A'},{path:'Surname',operator:'StartsWith',value1:'B'},{path:'Surname',operator:'StartsWith',value1:'C'}]}" noDataText=" {worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
            <headerToolbar>
                <core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesHeader" type="XML"/>
            </headerToolbar>
            <columns>
                <core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesColumns" type="XML"/>
            </columns>
            <items>
                <core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesRows" type="XML"/>
            </items>
        </Table>
    </content>
</IconTabFilter>
<IconTabSeparator icon="sap-icon://process"/>
<IconTabFilter text="DEF" key="2" icon="sap-icon://alphabetical-order">
    <content>
        <Table id="table2" width="auto" items="{path:'/ContactSet',parameters:{expand:'BusinessAddress,HomeAddress,OtherAddress,Photo'},filters:[{path:'Surname',operator:'StartsWith',value1:'D'},{path:'Surname',operator:'StartsWith',value1:'E'},{path:'Surname',operator:'StartsWith',value1:'F'}]}" noDataText="{worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
            <headerToolbar>
                <core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesHeader" type="XML"/>
            </headerToolbar>
            <columns>
                <core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesColumns" type="XML"/>
            </columns>
            <items>
                <core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesRows" type="XML"/>
            </items>
        </Table>
    </content>
</IconTabFilter>

我在 tablesHeader 片段文件中有一些绑定：

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
    <Toolbar>
        <Title text="{worklistView>/worklistTableTitle}"/>
        <ToolbarSpacer/>
        <SearchField tooltip="{i18n>worklistSearchTooltip}" search="onSearch" width="auto"/>
    </Toolbar>
</core:FragmentDefinition>

现在的问题是如何根据其父元素自定义片段内的绑定。例如，我希望 <Title text="{worklistView>/worklistTable1Title}"/> 放在 IconTabFilter 和 key="1" 中， <Title text="{worklistView>/worklistTable2Title}"/> 当它放在 IconTabFilter 和 [=18 时=].

一种可能性是在我们将其放置在目标中时将此绑定传递给片段。但我不知道在 SAPUI5 中我们是否有任何选择。

另一种可能性是使用某些类型的模板，如 here 所解释的那样。但是，我又不知道如何根据父元素创建条件。

注意：我不想直接在目标文件中输入片段文件中的代码，因为我想防止重复代码。

Answer 1

您需要使用 worklistView JSON 模型。正如您所提到的，它是一个 JSON 模型，将有一个通用的属性绑定到 header 文本控件，而不管所选键如何。

加载时 IconTabBar 将使用 selectedKey 属性设置默认值 key。因此，我们可以将此 key 值设置为 header 部分中 header 文本的默认值。

view.xml

<IconTabBar
    id="idIconTabBar"
    select="handleIconTabBarSelect"
    selectedKey="1"
    class="sapUiResponsiveContentPadding">
    <items>
        <IconTabFilter text="ABC" key="1" icon="sap-icon://alphabetical-order">
            <content>
                <Table id="table1" width="auto"  noDataText=" {worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
                    <headerToolbar>
                        <core:Fragment fragmentName="path/tablesHeader" type="XML"/>
                    </headerToolbar>
                    <!-- columns-->
                    <!-- items -->
                </Table>
            </content>
        </IconTabFilter>
        <IconTabSeparator icon="sap-icon://process"/>
        <IconTabFilter text="DEF" key="2" icon="sap-icon://alphabetical-order">
            <content>
                <Table id="table2" width="auto"  noDataText="{worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
                    <headerToolbar>
                        <core:Fragment fragmentName="path/tablesHeader" type="XML"/>
                    </headerToolbar>
                    <!-- columns-->
                    <!-- items -->
                </Table>
            </content>
        </IconTabFilter>
    </items>
</IconTabBar>

Header片段

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
    <Toolbar>
        <Title text="{worklistView>/worklistTableHdrTitle}"/>
        <ToolbarSpacer/>
        <SearchField tooltip="{i18n>worklistSearchTooltip}" search="onSearch" width="auto"/>
    </Toolbar>
</core:FragmentDefinition>

controller.js

worklistView 模型将设置额外的属性 worklistTableHdrTitle，默认值根据 IconTabBar 中提到的 key。

setworklistViewModel: function() {
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData({
      "worklistTableHdrTitle": "Table1 Title",//default value, as selectedKey="1" in IconTabBar 
      "worklistTable1Title": "Table1 Title",
      "worklistTable2Title": "Table2 Title",
      "tableNoDataText": "No Data"
    });
    this.getView().setModel(oModel, "worklistView");
  },

根据选择操作 worklistView 模型数据。

  handleIconTabBarSelect: function(oEvent) { 
    var sSelectedKey = oEvent.getParameters("selectedKey").key;
    if (sSelectedKey) {
      var oModel = this.getView().getModel("worklistView");
      if (oModel) 
        oModel.setProperty("/worklistTableHdrTitle", (sSelectedKey === "1") ? oModel.getProperty("/worklistTable1Title") : oModel.getProperty("/worklistTable2Title"));
    }
  },

是否可以基于父元素在 SAPUI5 中进行一些条件绑定？

Is it possible to do some conditional binding in SAPUI5 based on parent element?

sapui5