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 - 在視圖之間傳遞數據

回答

相關問題