javascript - 在 icontab 中加载动态内容

Question

我有一个带有 ui5 的 IconTabBar，每个选项卡都有其内容作为 View ，并从 Json 数据集加载内容。

我需要重定向到特定选项卡，我通过设置 selectedKey 来做到这一点。但是内容不加载。该选项卡被选中，但显示的内容来自上一个选项卡。我想可能与 DOM 事件有关。

我的用例

最初所有选项卡都是隐藏的。在一个事件中，我设置仅 iContact Tab 可见(通过设置visible=true)，然后在另一个事件(按下按钮时)我需要重定向到 iData Tab。

我的 xml View

 <IconTabBar selectedKey="iContact" id="idMenu" expandable="false">
     <items>
        <IconTabFilter text="Data" id="iData" visible="false">
            <mvc:XMLView viewName="APP.view.TabData"/>
        </IconTabFilter>
        <IconTabFilter text="Contact" id="iContact" visible="false">
            <mvc:XMLView viewName="APP.view.TabContact"/>
        </IconTabFilter>
     </items>
 </IconTabBar>

在我的 Controller 中，按下按钮来加载 iData 选项卡。我将选项卡设置为可见，该选项卡被标记为已选择，但显示的内容来自 icontact 选项卡。

 sap.ui.getCore().getElementById('idMenu').setSelectedKey("iData");

谢谢

Answer 1

您应该使用 key 属性，而不是 IconTabFilter 中的 id，如下所示:

<IconTabBar selectedKey="iContact" id="idMenu" expandable="false">
     <items>
        <IconTabFilter text="Data" key="iData" visible="false">
            <mvc:XMLView viewName="APP.view.TabData"/>
        </IconTabFilter>
        <IconTabFilter text="Contact" key="iContact" visible="false">
            <mvc:XMLView viewName="APP.view.TabContact"/>
        </IconTabFilter>
     </items>
 </IconTabBar>

IconTabFilter 是 sap.ui.core.Item 的扩展并且它有 key 属性作为标识符。