How to bind properties with the collection Using OdataModel in SAPUI5

Hello Guys please i need your help.

Using a Mockserver i'm abel to get access zu OData like this way

var oModel = this.getOwnerComponent().getModel("oServiceModel");
var sReservationPath = "/Book_Regal(Bibliothek='BE1',ReservationNr='4162')/Reserve_Book";

I bind my Form like this:

var formA = this.getView().byId("FormA");
formA.setModel(oModel, "Bibliothek");
formA.bindElement({path: "/Reserve_Book(Bibliothek='BE1',ReservationNr='4162')", model: "Bibliothek"});

My MockData(BookReserved.json) looks like this:

[
{
    "results": [
        {
            "__metadata": {
                "id": "http://MyWebService/Reserve_Book(BibliothekName='BE1',ReservationNr='4162')",
                "uri": "http://MyWebService/Reserve_Book(BibliothekName='BE1',ReservationNr='4162')",
                "type": "infos.Reserve_BookType"
            },
            "iScomfirmed": true,
            "BibliothekName": "BE1",
            "ReservationNr": "4162",
            "BookType": "3021",
            "BookCategory": "2"               
        }
                ]
}

]

My SimpleForm looks like this

<Input  value="{Bibliothek/results[0]/>BibliothekName}" editable="false"> 
</Input>

What do i wrong ? Please can you help me ?

Solution

Assuming your mock server works there are two errors.

The binding syntax is {MODEL_NAME>PATH} (if the name of the model is undefined or '' you can omit the first part and just use {PATH}).

In your case MODEL_NAME is Bibliothek. /results[0]/ is part of a path and not the model name so it can never appear before the > symbol.

Then when dealing with OData you will never use array indices (like [0]). OData entries have a proper key which has to be used (and you did already use it when calling bindElement).

Your form is then connected to your binding path. All elements below the form also have access to this information and can use it by setting a relative binding path so your code should look like

<Input value="{Bibliothek>BibliothekName}">

Just some examples which are all basically the same

Hardcoded absolute binding of element

This only works if the entity has been already loaded in another request

<form:SimpleForm>
   <Input value="{Bibliothek>/Reserve_Book(Bibliothek='BE1',ReservationNr='4162')/BibliothekName}" />
<form:SimpleForm />

Hardcoded absolute binding of parent, relativ binding of child

This can trigger it's own request if the entity hasn't been already loaded

<form:SimpleForm binding="{Bibliothek>/Reserve_Book(Bibliothek='BE1',ReservationNr='4162')}">
   <Input value="{Bibliothek>BibliothekName}" />
<form:SimpleForm />

Dynamic absolute binding of parent (in JS), relativ binding of child

This behaves the same as the second example

this.byId("form").bindElement({path: "/Reserve_Book(Bibliothek='BE1',ReservationNr='4162')", model: "Bibliothek"});

<form:SimpleForm id="form">
   <Input value="{Bibliothek>BibliothekName}" />
<form:SimpleForm />