what are parts: and path: in sapui5 and why are they used?

What is the use of parts and path in SAPUI5 while dealing with models?

Can someone explain me with respect to the following code (where invoice is a JSONModel)?

<mvc:View
    controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <List
            headerText="{i18n>invoiceListTitle}"
        class="sapUiResponsiveMargin"
        width="auto"
        items="{invoice>/Invoices}">
        <items>
            <ObjectListItem
                title="{invoice>Quantity} x {invoice>ProductName}"
                number="{
                    parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
                    type: 'sap.ui.model.type.Currency',
                    formatOptions: {
                        showMeasure: false
                    }
                }"
                numberUnit="{view>/currency}"
                numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }">
                <firstStatus>
                    <ObjectStatus text="{
                        path: 'invoice>Status',
                        formatter: '.formatter.statusText'
                    }"/>
                </firstStatus>
            </ObjectListItem>

        </items>
    </List>
</mvc:View>

Solution

Welcome to StackOverflow!

What you are referencing is called binding. In your example, you have:

List binding: items="{invoice>/Invoices}".
Simple property binding: numberUnit="{view>/currency}".
Composite property binding: number="{parts: [...]} (with explicit syntax) and title="{invoice>Quantity} x {invoice>ProductName}" (with complex syntax).
Expression binding: numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"

The SDK has a few extensive documentation pages about these topics, under the chapter Data binding.

List binding is used to create a collection of controls, based on the data inside the model (either based on a list or a map of objects). Conceptually, you can imagine that UI5 loops through your values and instantiates the corresponding control using a template or a factory function. The path in this case is the (relative or absolute) path towards the collection.

Simple property binding is used just to fill in a property of a control from your model based on a single scalar field in the model. The path here is the (relative or absolute) path towards the property.

Composite property binding can be used to fill a property of a control based on multiple fields, which are combined through either a formatter function or a type (like the currency in your example). For example, when using a formatter, each part will be passed as a parameter to your function (e.g. if you have 2 parts, your formatter should expect 2 parameters). The parts here are used to define each individual field that you want to use when computing the property value.

Expression binding or the complex syntax is simply a form of syntactic sugar to allow you to define a formatter inline without having to write a dedicate JS function.

You always can use the simplified syntax property="{/path}" or the extended syntax property="{path: '/path'}", which are equivalent (but you are forced to use the extended syntax once you want to specify more binding parameters).