Question

我有一个带有ui5的IconTabBar，每个标签都有其内容作为视图，并从Json数据集加载内容。

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

我的用例

最初隐藏所有标签。在一个事件中，我设置仅显示iContact Tab（通过设置visible = true），然后在另一个事件上（在按下的按钮上）我需要重定向到iData Tab。

我的xml视图

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

在我按下的按钮控制器中加载iData Tab。我正在设置选项卡，选项卡被标记为已选中，但显示的内容来自icontact Tab。

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

由于

Answer 1

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

<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的扩展名，它有键属性作为标识符。

Answer 2

IMO，这可以通过适当的MVC来完成，我们有一个模型来控制要显示的内容和要选择的内容。这是一个例子 http://jsbin.com/piwepuv/edit?html,js,output

sap.ui.define(['sap/m/IconTabBar', 'sap/m/IconTabFilter',
              'sap/ui/model/json/JSONModel'],
              function(IconTabBar, IconTabFilter, JSONModel) {
  var oBar = new IconTabBar({
    selectedKey: '{/selected}',
    items: {
      path: '/visible',
      template: new IconTabFilter({
        text: "{text}",
        key: "{id}"
      })
    }
  });
  oBar.placeAt('content');

  oBar.setModel(new JSONModel({
    selected: 'iContact',
    visible: [
      {id: "iData", text: "Data"},
      {id: "iContact", text: "Contact"}
    ]
  }));
});

http://jsbin.com/yuxicej/edit?html,js,output

<!DOCTYPE HTML>
<html>

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <title>MVC</title>
    <script id="sap-ui-bootstrap" type="text/javascript"
            src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-xx-bindingSyntax="complex">
    </script>

    <script id="oView" type="sapui5/xmlview">
    <mvc:View height="100%" controllerName="myView.Template"
      xmlns="sap.m" 
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc">
      <IconTabBar selectedKey="{/selected}" items="{/visible}">
        <items>
          <IconTabFilter text="{text}" key="{id}" />
        </items>
      </IconTabBar>
  </mvc:View>
    </script>

  </head>

  <body class="sapUiBody sapUiSizeCompact" role="application">
    <div id="content"></div>
  </body>

</html>

视图

sap.ui.define([
  'sap/ui/core/mvc/Controller',
  'sap/ui/model/json/JSONModel'
], function(Controller, JSONModel) {
  "use strict";

  var oController = Controller.extend("myView.Template", {
    onInit: function(oEvent) {
      this.getView().setModel(new JSONModel({
        selected: 'iContact',
        visible: [
          {id: "iData", text: "Data"},
          {id: "iContact", text: "Contact"}
        ]
      }));
    }
  });

  return oController;
});

var oView = sap.ui.xmlview({
  viewContent: jQuery('#oView').html()
});

oView.placeAt('content');

在icontab中加载动态内容

2 个答案: