How to bind oData to table with parameter

Question

I have oData by path Northwind Customers('ANATR')/Orders I can't bind it to table Customer orders

Here I have /Customers('" + oArgs.customerId + "')/Orders like in oData link

OrderList.controller.js

sap.ui.define([
    "sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
    "use strict";

    return BaseController.extend("sap.ui.demo.nav.controller.customer.OrderList", {

        onInit: function () {
            var oRouter = this.getRouter();
            oRouter.getRoute("customer").attachMatched(this._onRouteMatched, this);

        },

        _onRouteMatched : function (oEvent) {
            var oArgs, oView;

            oArgs = oEvent.getParameter("arguments");
            oView = this.getView();

            oView.bindElement({
                path : "/Customers('" + oArgs.customerId + "')/Orders",
                events : {
                    change: this._onBindingChange.bind(this),
                    dataRequested: function (oEvent) {
                        oView.setBusy(true);
                    },
                    dataReceived: function (oEvent) {
                        oView.setBusy(false);
                    }
                }
            });
        }
    });

});

And here I link it to bind data {path : '/Orders'} how to insert {CustomerID} parameter?

OrderList.view.xml

<mvc:View
    controllerName="sap.ui.demo.nav.controller.customer.OrderList"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:f="sap.ui.layout.form"
    xmlns:core="sap.ui.core">
    <Page
        id="orderListPage"
        title="{i18n>OrderList}"
        showNavButton="true"
        navButtonPress=".onNavBack"
        class="sapUiResponsiveContentPadding">
        <Panel accessibleRole="Region">
            <headerToolbar>
                <Toolbar>
                    <Title text="{i18n>orderListTitle}"/>
                    <ToolbarSpacer/>
                    <SearchField
                        width="50%"
                        search=".onFilterOrders"/>
                </Toolbar>
            </headerToolbar>
            <Table
                id="orderList"
                class="sapUiResponsiveMargin"
                width="auto"
                items="{
                    path : '/Orders'
                }">
                <columns>
                    <Column
                        hAlign="End"
                        minScreenWidth="Small"
                        demandPopin="true"
                        width="4em">
                        <Text text="{i18n>columnOrderID}"/>
                    </Column>
                    <Column>
                        <Text text="{i18n>columnCustomerID}"/>
                    </Column>
                    <Column
                        minScreenWidth="Tablet"
                        demandPopin="false">
                        <Text text="{i18n>columnOrderDate}"/>
                    </Column>
                    <Column
                        hAlign="End">
                        <Text text="{i18n>columnPrice}"/>
                    </Column>
                </columns>
                <items>
                    <ColumnListItem
                        type="Navigation"
                        press=".onPress">
                        <cells>
                            <ObjectNumber number="{OrderID}" emphasized="false"/>
                            <ObjectIdentifier title="{CustomerID}"/>
                            <Text text="{OrderDate}"/>
                            <ObjectNumber
                                number="{
                                    parts: [{path: 'Freight'}],
                                    type: 'sap.ui.model.type.Currency',
                                    formatOptions: {
                                        showMeasure: false
                                    }
                                }"/>
                        </cells>
                    </ColumnListItem>
                </items>
            </Table>
        </Panel>
    </Page>
</mvc:View>

Answer 1

path : '/Orders' is an absolute binding (slash at the beginning). This means UI5 will try to fetch https://services.odata.org/V2/Northwind/Northwind.svc/Orders.

Also you bound your view to a list of things. In general, this is not what you want.

What you want is to bind your view against a single Customer entity

oView.bindElement({
    path : "/Customers('" + oArgs.customerId + "')",
    events: { 
        ... 
    }
});

and then use relative binding (no slash at the beginning) for the Orders:

items="{
    path : 'Orders'
}"