SAPUI5 bindendes JSON-Modell zur Steuerung

Question

Ich bin ein ABAPer und lerne SAPUI5. Ich übe Master-Detail-Anwendung durch splitApp Kontrolle. Ich habe nach einem solchen Beispiel gesucht, aber keins gefunden. Also, ich schreibe hier. Bitte führen Sie mich wenn möglich.

Ich verwende ein lokales JSON-Modell (Einträge in einer Datei namens Products.json). Ich habe zwei Ansichten first.xml und seconds.xml welche Meister und Detail sind.

In dem ersten Blick habe ich eine Liste und unten ist der Code in onItemSelect Ereignisse dieser Liste geschrieben

var oSelectedItem = oEvent.getSource(); 
var oContext = oSelectedItem.getBindingContext("products"); 
var sPath = oContext.getPath(); 
var oPrdDetails = sap.ui.xmlview("view.second").byId("prdDetails"); 
oPrdDetails.bindElement({ path: sPath, model: "products" }); 

var oListDetails = sap.ui.xmlview("view.second").byId("listDetails"); 
oListDetails.bindElement({ path: sPath, model: "product2" }); 

Id="prdDetails" ist Platte in der zweiten Ansicht und Id="listDetails" ist eine Liste in der zweiten Ansicht. Mein Problem ist, dass diese Steuerelemente nicht mit dem obigen Code aktualisiert werden.

Answer 1

Das SAPUI5-Entwicklerhandbuch enthält die erforderlichen Schritte in der Walkthrough tutorial. Im Fall von Master-Detail wird dies durch Navigation empfohlen.

In Ihrem onItemSelect(), können Sie diesen Schnipsel in eine Route navigieren können mit:

var oRouter = sap.ui.core.UIComponent.getRouterFor(this); 
oRouter.navTo("detail", { 
    invoicePath:  oItem.getBindingContext("invoice").getPath().substr(1) 
}); 

In Ihrer Detailansicht haben Sie Muster abgestimmt Veranstaltung wie diese abonnieren:

oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this); 

der Rahmen wird die this._onObjectMatched angegeben rufen, wenn die richtige URL-Hash angefordert wird:

_onObjectMatched: function (oEvent) { 
    this.getView().bindElement({ 
     path: "/" + oEvent.getParameter("arguments").invoicePath, 
     model: "invoice" 
    }); 
} 

Wenn Sie das Element an die Benutzeroberfläche binden, können Sie den Steuerelementen in Ihrer Ansicht Eigenschaften relativ zuweisen ({propName}).

Natürlich müssen Sie das Routing und component.js für Ihre Anwendung einrichten, aber dies wird auch in der exemplarischen Vorgehensweise beschrieben.

Die Beispielanwendung kann von here (rechts oben auf Download-Button)