时间戳

首页 > 解决方案 > 是否可以基于父元素在 SAPUI5 中进行一些条件绑定？

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

问题描述

我有一个 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}"/>它何时被放置在IconTabFilterwith内key="1"以及<Title text="{worklistView>/worklistTable2Title}"/>当它被放置在IconTabFilterwith内时key="2"。

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

另一种可能性是使用某种模板，就像这里解释的那样。但是，我也不知道如何根据父元素创建条件。

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

标签： sapui5

解决方案

您需要使用worklistViewJSON 模型。正如您所提到的，它是一个 JSON 模型，将有一个通用属性绑定到标题文本控件，而与所选键无关。

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

视图.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>

标头片段

<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>

控制器.js

worklistView模型将worklistTableHdrTitle根据.keyIconTabBar

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"));
    }
  },

推荐阅读