ui5 SplitContainer 不将事件数据传递给子元素中的 onBeforeShow

Question

我正在编写一个 OpenUI5 应用程序，使用 TileContainer Launchpad、SplitContainer、Master 和 Detail 页面。 SplitContainer 需要为三个不同的模型提供服务，每个模型都具有相同的结构（但数据不同）。这意味着每个模型都会重复使用 master 和 detail，但我必须告诉 master 它正在使用哪个模型。顺序为：

显示的 Launchpad 磁贴：

data = model.getData(); // from model, includes an attribute 'model'
                        // to tell the subsequent page which model to use
if (data && data.Menu) {
  for (m = 0; m < data.Menu.length; m++) {
    menu = data.Menu[m];
    tc.addTile(new sap.m.StandardTile({
      icon: menu.icon,
      title: menu.title,
      info: menu.title,
      press: navFn(menu.model) // here, the model to use is passed in the function params
    }));
  }
}

用户在 'press' 事件中单击具有特定参数的图块以指示使用哪个模型。导航功能使用数据负载引发事件，App 控制器处理导航。这行得通。

this.bus.publish("nav", "to", {
  id: "my.Main",
  data: {
      model: model // received from function parameters
  }
});

调用主视图（包含 SplitContainer）并在 onBeforeShow 中接收事件 以及提供的事件数据；在主视图的 onBeforeShow 函数中，我们在 SplitContainer 上使用函数 toMaster 调用主视图，提供相同的事件数据（指定要使用的模型）

onBeforeShow: function(event) { //event contains data.model (verified in debugging)
  var container = sap.ui.getCore().byId("my.Main.container");
  container.toMaster("my.Master", "show", { model: event.data.model }); //oData parameter
}

已调用主视图，但在方法 onBeforeShow 中，事件数据对象 不包含先前为属性 'model' 传递的数据 。我正在使用 onBeforeShow，因为文档明确指出这是您可以找到 toMaster().

中使用的所有数据的地方

onBeforeShow: function(event){
  // extract the model from the event data...
  if( typeof event.data.model !== "undefined") // because event.data.model is not defined, the model is never set :(
     this.getView().setModel(new sap.ui.model.json.JSONModel(event.data.model));
},

来自SplitContainer.toMaster documentation, referring to parameter oData

{object} oData Since version 1.7.1. This optional object can carry any payload data which should be made available to the target page. The "beforeShow" event on the target page will contain this data object as "data" property.

它去哪儿了，我该如何传递它？我基本上是在尝试将事件数据从初始视图级联到后续视图，然后再到最终的主视图（菜单）。任何帮助将不胜感激。

Answer 1

我构建了一个小型 jsBin 来展示事件的工作原理：http://jsbin.com/zonovuzixi/3/edit?html,css,js,output

<!DOCTYPE html>
<html>
<head>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>

  <script>
    (function () {
      "use strict";
      var detailPage = new sap.m.Page({ 
        title: "firstDetail",
        content: new sap.m.Button({ 
          text: "to page 2",
          press: function () {
            splitApp.toDetail(secondDetailPage.getId(),"show",{foo :"bar"});
          }
        })
      });

      var secondDetailPage = new sap.m.Page({ title: "secondDetail"})
      .addEventDelegate({
        onBeforeShow: function(evt) {
          sap.m.MessageToast.show(evt.data.foo)
        }
      });


      var splitApp = new sap.m.SplitApp({
        detailPages: [detailPage, secondDetailPage]
      });

      splitApp.placeAt("content");
    })();
  </script>
  </head>

<body id="content" class="sapUiBody">

</body>
</html>

我不知道您的 "nav"、"to" 处理程序是如何实现的，因为它是自定义的。另外，我不知道你是否将 onBeforeShow 的 EventDelegate 添加到正确的页面。

ui5 SplitContainer 不将事件数据传递给子元素中的 onBeforeShow

ui5 SplitContainer not passing event data to onBeforeShow in child element

javascript

dom-events

sapui5