UI5 - 在视图之间传递数据

问题描述

我观看了一些关于导航+在视图之间传递数据的教程，但它在我的情况下不起作用。
我的目标是实现以下功能：

I watched some tutorials about navigation + passing data between views, but it doesn't work in my case.My goal is to achieve the follwing:

1. 在MainPage上，用户可以看到带有产品的表格（JSON文件）。 （工作正常！）


2. 按下详细信息按钮后，将显示详细信息页面（表格），其中包含有关选择的所有信息。

导航工作正常，Detail页面显示出来，但数据绑定看起来不起作用（没有数据显示）
我的想法是通过JSON字符串到详细信息页面。我怎样才能做到这一点？或者有更优雅的方式吗？

The navigation works perfectly and the Detail page is showing up, however the data binding doesnt seem to work (no data is displayed)My idea is to pass the JSON String to the Detail Page. How can I achieve that? Or is there a more elegant way?

这是迄今为止的代码：

MainView Controller

MainView Controller

sap.ui.controller("my.zodb_demo.MainView", {

    onInit: function() {
        var oModel = new sap.ui.model.json.JSONModel("zodb_demo/model/products.json");

        var mainTable = this.getView().byId("productsTable");
        this.getView().setModel(oModel);
        mainTable.setModel(oModel);
        mainTable.bindItems("/ProductCollection", new sap.m.ColumnListItem({
            cells: [new sap.m.Text({
                text: "{Name}"
            }), new sap.m.Text({
                text: "{SupplierName}"
            }), new sap.m.Text({
                text: "{Price}"
            })]
        }));
    },

    onDetailsPressed: function(oEvent) {
        var oTable = this.getView().byId("productsTable");

        var contexts = oTable.getSelectedContexts();
        var items = contexts.map(function(c) {
            return c.getObject();
        });

        var app = sap.ui.getCore().byId("mainApp");
        var page = app.getPage("DetailsForm");

        //Just to check if the selected JSON String is correct
        alert(JSON.stringify(items));


        //Navigation to the Detail Form
        app.to(page, "flip");
    }
});

详情表格视图：

Detail Form View:

<core:View xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" controllerName="my.zodb_demo.DetailsForm">
  <Page title="Details" showNavButton="true" navButtonPress="goBack">
    <content>
      <f:Form id="FormMain" minWidth="1024" maxContainerCols="2" editable="false" class="isReadonly">
        <f:title>
          <core:Title text="Information" />
        </f:title>
        <f:layout>
          <f:ResponsiveGridLayout labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4" columnsL="1" columnsM="1" />
        </f:layout>
        <f:formContainers>
          <f:FormContainer>
            <f:formElements>
              <f:FormElement label="Supplier Name">
                <f:fields>
                  <Text text="{SupplierName}" id="nameText" />
                </f:fields>
              </f:FormElement>
              <f:FormElement label="Product">
                <f:fields>
                  <Text text="{Name}" />
                </f:fields>
              </f:FormElement>
            </f:formElements>
          </f:FormContainer>
        </f:formContainers>
      </f:Form>
    </content>
  </Page>
</core:View>

详细表格控制器：

sap.ui.controller("my.zodb_demo.DetailsForm", {

    goBack: function() {
        var app = sap.ui.getCore().byId("mainApp");
        app.back();
    }
});

推荐答案

在控制器之间传递数据的推荐方法是使用EventBus

The recommended way to pass data between controllers is to use the EventBus

sap.ui.getCore().getEventBus();

您可以在控制器之间定义一个通道和事件。在您的DetailController上，您订阅了如下的事件：

You define a channel and event between the controllers. On your DetailController you subscribe to an event like this:

onInit : function() {
    var eventBus = sap.ui.getCore().getEventBus();
    // 1. ChannelName, 2. EventName, 3. Function to be executed, 4. Listener
    eventBus.subscribe("MainDetailChannel", "onNavigateEvent", this.onDataReceived, this);)
},

onDataReceived : function(channel, event, data) {
   // do something with the data (bind to model)
   console.log(JSON.stringify(data));
}

然后在您的MainController上发布Event：

And on your MainController you publish the Event:

...
//Navigation to the Detail Form
app.to(page,"flip");
var eventBus = sap.ui.getCore().getEventBus();
// 1. ChannelName, 2. EventName, 3. the data
eventBus.publish("MainDetailChannel", "onNavigateEvent", { foo : "bar" });
...

请参阅此处的文档：

还有一个更详细的例子：

And a more detailed example:http://scn.sap.com/community/developer-center/front-end/blog/2015/10/25/openui5-sapui5-communication-between-controllers--using-publish-and-subscribe-from-eventbus

这篇关于UI5 - 在视图之间传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！