Question

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

在MainPage上，用户可以看到包含产品的表（JSON文件）。（工作正常！）
按下＆＃34;细节＆＃34;按钮，详细信息页面（＆＃34;表格＆＃34;）将显示有关选择的所有信息。

导航工作正常，详情页面显示，但数据绑定似乎不起作用（没有数据显示）我的想法是将JSON字符串传递给详细信息页面。我怎样才能做到这一点？还是有更优雅的方式？

以下是目前的代码：

MainView控制器

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");
    }
});

详情表单视图：

<mvc: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>
</mvc:View>

详细表格控制器：

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

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

Answer 1

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

Mat img3 = Mat(img.rows, img.cols, img.type(), v.data()).clone();

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

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

在您的MainController上发布事件：

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));
}

请参阅此处的文档：https://openui5.hana.ondemand.com/docs/api/symbols/sap.ui.core.EventBus.html#subscribe

更详细的例子： http://scn.sap.com/community/developer-center/front-end/blog/2015/10/25/openui5-sapui5-communication-between-controllers--using-publish-and-subscribe-from-eventbus

Answer 2

即使这个问题已经过时，这个场景今天仍然有效（它是一个典型的主 - 细节/ n对1场景）。另一方面，currently accepted solution不仅过时，而且还是XY-problem的结果。

有更优雅的方式吗？

绝对。看一下这个例子：https://embed.plnkr.co/F3t6gI8TPUZwCOnA?show=preview

无论使用什么控件（App，SplitApp或FlexibleColumnLayout），概念都是一样的：

用户点击主人的项目。
1. 通过getBindingContext(/*modelName*/)
2. 仅将密钥传递给navTo参数（无需传递整个项目上下文）
详情视图
1. 将处理程序附加到patternMatched event
2. 在处理程序中，通过访问存储传递的密钥的事件参数arguments，创建相应的密钥，通过该密钥可以唯一地标识目标条目。 In case of OData, use the API createKey。
3. 使用创建的密钥，使用唯一条目的路径调用bindElement，以便将其上下文传播到详细信息视图。
每次查看详细信息页面时，都可以解析详细信息视图中的相对绑定路径（深层链接支持）。

Answer 3

您还可以设置本地json模型来存储数据，并在相应的视图中使用它。但一定要在合适的时间初始化或清除它。

将数据从主页面传递到详细信息页面

3 个答案: