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

J0eBl4ck 发表于 Dev

J0eBl4ck

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

用户可以在MainPage上看到包含产品的表（JSON文件）。（工作正常！）
按下“详细信息”按钮后，将显示详细信息页面（“表单”），其中包含有关选择的所有信息。

导航工作正常，并且正在显示“详细信息”页面，但是数据绑定似乎不起作用（未显示任何数据）。我的想法是将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();
    }
});

确定性失败

在控制器之间传递数据的推荐方法是使用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从事件总线订阅

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。