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

Question

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

1. 在MainPage上,用户可以看到包含产品的表(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();
    }
});

Answer 1

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

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

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

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上发布事件:

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

请参阅此处的文档: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从- eventbus

Answer 2

尽管这个问题很老了，但这个场景今天仍然有效（这是一个典型的主从/ n 对 1场景）。另一方面，当前接受的解决方案不仅已经过时，而且还是xy 问题的结果。

有更优雅的方式吗？

绝对地。看看这个灵活的列布局教程：https://sdk.openui5.org/topic/c4de2df385174e58a689d9847c7553bd

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

1. 用户单击主控中的项目。
   1. 通过 获取所选项目的绑定上下文getBindingContext(/*modelName*/)。
   2. 仅将键传递给参数navTo（无需传递整个项目上下文）。
2. 在“详细信息”视图中：
   1. 将处理程序附加到patternMatched详细信息控制器的onInit.
   2. 在处理程序中，通过访问arguments存储传递的密钥的事件参数来创建相应的密钥，通过该密钥可以唯一标识目标条目。如果是 OData，请使用 API createKey。
   3. 使用创建的键，bindObject使用唯一条目的路径进行调用，以便将其上下文传播到详细视图。
3. 然后，每次查看详细信息页面时，都可以解析详细信息视图中的相对绑定路径。作为奖励，这还可以实现深层链接导航或书签功能。