使用目标将数据从一个视图传递到另一个视图

Question

我是sapui5的新手，我正在尝试用两个视图创建一个应用程序。使用multicomboBox的一个视图和另一个带有动态表的视图，在从multicomboBox中选择项目后，我必须单击提交按钮。在提交按钮单击我必须导航到另一个视图并创建一个具有列名称的表，列名将被选中multicomboBox的值。我正在使用目标来导航和使用xml视图。问题是我正在获取所选项目，如何将所选数据传递到另一个视图并创建表格是我面临的问题。 我发布下面的观点和控制器。以下代码取自sapui5 Explored，我结合了multicomboBox和Target Program。提前致谢

View1.xml

<mvc:View 
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:l="sap.ui.layout"
    xmlns:html="http://www.w3.org/1999/xhtml"
    controllerName="sap.ui.core.sample.trial.targetsApp.controller.View1" 
    xmlns:form="sap.ui.layout.form">
     <App>  
        <Page title="Example 1">  
            <MultiComboBox selectionChange="handleSelectionChange" selectionFinish="handleSelectionFinish" width="500px"
  items="{
                    path: '/Collection',
                     sorter: { path: 'Name' }
                }">
  <core:Item key="{ProductId}" text="{Name}" />
  </MultiComboBox>
  <footer>  
                <Bar>  
                    <contentRight>  
                        <Button text="Submit" press="onToView2" />  
                    </contentRight>  
                </Bar>  
            </footer>  

        </Page>  
    </App>  
 </mvc:View> 

View2.xml

<mvc:View
    xmlns:mvc="sap.ui.core.mvc" 
    xmlns="sap.m"
    xmlns:l="sap.ui.layout"
    xmlns:html="http://www.w3.org/1999/xhtml"
    controllerName="sap.ui.core.sample.trial.targetsApp.controller.View2" 
    xmlns:form="sap.ui.layout.form">
     <App>  
        <Page title="TableView"
  showNavButton="true"
  navButtonPress="onBack"> 
  <footer>  
                <Bar>  
                    <contentRight>  
                        <Button text="Submit" press="onToView2" />  
                    </contentRight>  
                </Bar>  
            </footer>  

        </Page>  
    </App>  
 </mvc:View> 

view1的控制器

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


        var PageController = Controller.extend("sap.ui.core.sample.trial.targetsApp.controller.View1", {


        onInit: function () {
        // set explored app's demo model on this sample
        var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
        this.getView().setModel(oModel);
        },


        onToView2 : function () {

        this.getOwnerComponent().getTargets().display("page2");
    },

        handleSelectionChange: function(oEvent) {
        var changedItem = oEvent.getParameter("changedItem");
        var isSelected = oEvent.getParameter("selected");


        var state = "Selected";
        if (!isSelected) {
        state = "Deselected"
        }


        MessageToast.show("Event 'selectionChange': " + state + " '" + changedItem.getText() + "'", {
        width: "auto"
        });
        },


        handleSelectionFinish: function(oEvent) {
        var selectedItems = oEvent.getParameter("selectedItems");
        var messageText = "Event 'selectionFinished': [";


        for (var i = 0; i < selectedItems.length; i++) {
        messageText += "'" + selectedItems[i].getText() + "'";
        if (i != selectedItems.length-1) {
        messageText += ",";
        }
        }


        messageText += "]";


        MessageToast.show(messageText, {
        width: "auto"
        });
        },

        handleNav: function(evt){
        this.getOwnerComponent().getTargets().display("page2");
        }
        });




        return PageController;


       }, true);

view2的控制器

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


  return Controller.extend("sap.ui.core.sample.trial.targetsApp.controller.View2", {
  onBack : function () {
  this.getOwnerComponent().getTargets().display("page1");
  }
  });


},true);

编辑过controller2.js

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

    return Controller.extend("sap.ui.core.sample.trial.targetsApp.controller.View2", {

        onInit:function(){
              //console.log(sap.ui.getCore().AppContext.selectedArray);

              //console.log(sap.ui.getCore().AppContext.selectedArray.length);

              var oTable = new sap.m.Table();
              for(var i = 0;i < sap.ui.getCore().AppContext.selectedArray.length;i++){
              oTable.addColumn(new sap.m.Column({
                  demandPopin : true,
                  header:new sap.m.Text({text:sap.ui.getCore().AppContext.selectedArray[i]})
              }));
              }
              //not working i want to place it in view2.xml
              //oTable.placeAt("content");

        },
        displayPress : function(){

             console.log(sap.ui.getCore().AppContext.selectedArray);

              console.log(sap.ui.getCore().AppContext.selectedArray.length);
              console.log(sap.ui.getCore().AppContext.selectedArray[0]);
              console.log(sap.ui.getCore().AppContext.selectedArray[1]);

        },
        onBack : function () {
            this.getOwnerComponent().getTargets().display("page1");
        }
    });

}, true);

编辑了view2.xml

<mvc:View
           xmlns:mvc="sap.ui.core.mvc" 
           xmlns="sap.m"
           xmlns:l="sap.ui.layout"
           xmlns:html="http://www.w3.org/1999/xhtml"
           controllerName="sap.ui.core.sample.trial.targetsApp.controller.View2" 
           xmlns:form="sap.ui.layout.form">
     <App>  
        <Page title="TableView"
            showNavButton="true"
            navButtonPress="onBack"> 
             <l:HorizontalLayout id="tableid">

             </l:HorizontalLayout>    

            <footer>  
                <Bar>  
                    <contentRight>  
                        <Button text="Add New Rows" press="displayPress" />  
                        <Button text="display" press="displayPress" /> 
                    </contentRight>  
                </Bar>  
            </footer>  

        </Page>  
    </App>  
 </mvc:View> 

Answer 1

在handleNav函数中使用：

//yourData can be any variable or object
this.getOwnerComponent().getTargets().display("page2", yourData);

在这里阅读更多：

display（vTargets，vData？）：sap.ui.core.routing.Targets