Передача данных с главной страницы на страницу сведений

Я посмотрел несколько руководств по навигации + передаче данных между представлениями, но в моем случае это не работает.
Моя цель состоит в том, чтобы достичь следующего:

1. на главной странице пользователь может видеть таблицу с продуктами (JSON-файл). (Работает отлично!)


2. после нажатия кнопки "подробности"отображается страница сведений ("форма") со всей информацией о выборе.

Навигация работает отлично, и страница сведений отображается, однако привязка данных, похоже, не работает. работа (данные не отображаются)
Моя идея состоит в том, чтобы передать строку 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();

    }

});