UI5 - 在视图之间传递数据

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

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

详细表单视图：

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

详细表单控制器：

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

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

来源

2015-11-30 J0eBl4ck

的推荐方法传递数据控制器之间要使用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-from-eventbus

来源

2015-11-30 14:49:29 deterministicFail

请注意，[组件有事件总线]（https://sapui5.netweaver.ondemand.com/#docs/api/symbols/sap.ui.core.Component.html#getEventBus）。如果您将应用程序封装在组件中，则应该使用它。在你的控制器中它看起来像这样：var eventBus = this.getOwnerComponent（）。getEventBus（）;' – schnoedel

您还可以设置本地json模型来存储您的数据，并将其用于cor回应意见。但一定要在正确的时间初始化或清除它。

来源

2015-12-02 03:19:45

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

有没有更优雅的方式？

绝对。拿这个例子来看看：https://embed.plnkr.co/oGgRwy/?show=preview

无论采用何种控制程序（App，SplitApp，或FlexibleColumnLayout），这个概念是相同的：

从主项用户点击。
1. 通过getBindingContext(/*modelName*/)
2. 通行证仅键（一个或多个）到navTo参数（不需要通过全项目上下文）
详细视图获得从所选择的项目的结合上下文
1. 将处理程序附加到导航路线的patternMatched event中onInit
2. 在处理程序中，通过whi创建相应的键通过访问存储传递的密钥的事件参数arguments，可以唯一地标识目标条目。 In case of OData, use the API createKey。
3. 使用创建的密钥，请使用唯一条目的路径调用bindElement，以便将其上下文传播到详细视图。
详细信息视图中的相对绑定路径可以在每次查看详细信息页时解析（深层链接支持）。

来源

2018-02-19 16:45:36 boghyon

UI5 - 在视图之间传递数据

回答

相关问题