UI5 - Передача данных между представлениями

Question

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

1. На MainPage пользователь может видеть таблицу с продуктами (JSON-файл). (Прекрасно работает!)
2. После нажатия кнопки «Подробности» на странице сведений («Форма») отображается вся информация о выборе.

навигации работает отлично и Detail страница показывает вверх, однако привязка данных не кажется, работает (не отображается никаких данных) Моя идея заключается в том, чтобы передать JSON строки в Detail Page. Как я могу это достичь? Или есть более элегантный способ?

Вот код до сих пор:

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

Detail Форма выпуска:

<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(); 
    } 
}); 

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-from-eventbus

Answer 2

Вы также можете установить локальную модель json для хранения ваших данных и использовать ее в cor отвечающие мнения. Но обязательно инициализируйте или очистите его в нужное время.

Answer 3

Несмотря на то, что этот вопрос старый, сценарий по-прежнему действует сегодня (это типичный сценарий master-detail/n-to-1). С другой стороны, currently accepted solution не только устарел, но и является результатом XY-problem.

есть ли более элегантный способ?

Абсолютно. Возьмите Посмотрите на этот пример: https://embed.plnkr.co/oGgRwy/?show=preview

Независимо от того, что элемент управления используется (App, SplitApp или FlexibleColumnLayout), понятие же:

1. Пользователь щелкает по элементу от мастера.
   1. Получить обязательный контекст от выбранного элемента по getBindingContext(/*modelName*/)
   2. Pass только ключ (ов) к navTo параметров (нет необходимости проходить весь контекст пункт)
2. Детальный вид
   1. Прикрепите проводник к patternMatched event навигационного маршрута в onInit
   2. В обработчике создайте соответствующий ключ, whi ch запись цели может быть идентифицирована однозначно, путем доступа к параметру события arguments, в котором сохранены переданные ключи. In case of OData, use the API createKey.
   3. С созданной клавишей вызовите bindElement с указанием пути к уникальной записи, чтобы распространить ее контекст на подробный вид.
3. Относительные пути привязки в подробном представлении могут быть затем разрешены каждый раз, когда просматривается подробная страница (поддержка глубоких ссылок).