CODEWITHSUNDEEP
data-bindingsapui5
jens
jens

Reputation: 534

how to nest a model binding in view with SAPUI5

Data Model:

[{
    "id": 51,
    "name": "BuildingA",
    "floors": [{
        "id": 101,
        "name": "UG"
    }, {
        "id": 102,
        "name": "EG"
    }, {
        "id": 103,
        "name": "1"
    }, {
        "id": 104,
        "name": "2"
    }, {
        "id": 105,
        "name": "3"
    }, {
        "id": 106,
        "name": "4"
    }]
}, {
    "id": 52,
    "name": "BuildingB",
    "floors": []
}]

Data Binding in controller:

this.getView().setModel(oResponseModel, "buildingNavigation");

Data Binding in view:

<tnt:NavigationList items="{path: 'buildingNavigation>/'}">
    <tnt:NavigationListItem text="{buildingNavigation>name}" icon="sap-icon://building" expanded="true" items="{path: 'buildingNavigation>floors', templateShareable:true}">
        <tnt:NavigationListItem text="{name}">
        </tnt:NavigationListItem>
    </tnt:NavigationListItem>
</tnt:NavigationList>

I am working with the NavigationList from here

Essentially, the binding seems to work since the first level gets filled with the building names (e.g. BuildingA, BuildingB). The second level seems to work in a way that it retrieves the right amount of items. (e.g. Building A, has 6x sub levels but I am unable to receive the attribute name from the floors array. It just shows 6 empty entries in the navigation.

I tried different combinations: e.g. /buildingNavigation>floors>name

All relevant information is contained and received in the model. I just don't seem to find the format to access it correctly.

Upvotes: 1

Views: 596

Answers (1)

Ashish Patil
Ashish Patil

Reputation: 1742

Inner most NavigationListItem will too have model's alias for binding.

Your code would be:

<tnt:NavigationList items="{path: 'buildingNavigation>/'}">
    <tnt:NavigationListItem text="{buildingNavigation>name}" icon="sap-icon://building" expanded="true" items="{path: 'buildingNavigation>floors', templateShareable:true}">
        <tnt:NavigationListItem text="{buildingNavigation>name}">
        </tnt:NavigationListItem>
    </tnt:NavigationListItem>
</tnt:NavigationList>

Upvotes: 2

Related Questions