sapui5 - 将数据从主页面传递到详细页面

Question

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

在 MainPage 上，用户可以看到包含产品的表格(JSON 文件)。 (工作正常!)

按下“详细信息”按钮后，将显示详细信息页面(“表格”)，其中包含有关选择的所有信息。

导航完美无缺，详细信息页面正在显示，但是数据绑定(bind)似乎不起作用(不显示数据)
我的想法是将 JSON 字符串传递给详细信息页面。我怎样才能做到这一点？还是有更优雅的方式？

这是到目前为止的代码:

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

详细表格 View :

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

详细表单 Controller :

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

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

Answer 1

尽管这个问题很老，但该场景在今天仍然有效(这是典型的主从/n 对 1 场景)。另一方面，currently accepted solution不仅过时，而且是 XY-problem 的结果.

is there a more elegant way?

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

无论使用什么控件(App、SplitApp 或 FlexibleColumnLayout)，概念都是一样的:

用户单击主文件中的项目。

通过 getBindingContext(/*modelName*/) 从选中项中获取绑定(bind)上下文

仅将 key 传递给 navTo 参数(无需传递整个项目上下文)

在详细 View 中

将处理程序附加到 patternMatched event onInit 中的导航路线

在处理程序中，通过访问事件参数arguments，创建相应的键，可以唯一标识目标条目。其中存储传递的 key 。 In case of OData, use the API createKey .

使用创建的 key ，调用 bindElement 带有唯一条目的路径，以便将其上下文传播到详细 View 。

然后可以在每次查看详细信息页面时解析详细 View 中的相对绑定(bind)路径(深度链接支持)。