Step 20: Aggregation Binding


Now that we have established a good structure for our app, it’s time to add some more functionality. We start exploring more features of data binding by adding some invoice data in JSON format that we display in a list below the panel.


Step 20: Aggregation Binding - 第1张  | 优通SAP


You can view and download all files at Walkthrough – Step 20.

webapp/Invoices.json (New)

The invoices file simply contains five invoices in a JSON format that we can use to bind controls against them in the app. JSON
is a very lightweight format for storing data and can be directly used as a data source for SAPUI5 applications.


We add a new model invoice to the sap.ui5 section
of the descriptor. This time we want a JSONModel, so we set the type to
sap.ui.model.json.JSONModel. The uri key is
the path to our test data relative to the component. With this little configuration
our component will automatically instantiate a new JSONModel which
loads the invoice data from the Invoices.json file. Finally,
the instantiated JSONModel is put onto the component as a named
model invoice. The named model is then visible throughout our app.


Automatic model instantiation is only available as of SAPUI5 version 1.30. If you are using an older version, you can manually instantiate the resource bundle and other models of the app in the onInit method of the Component.js file as we did for the resource bundle in Step 9: Component Configuration.


In the app view we add a second view to display our invoices below the panel.

6.webapp/view/InvoiceList.view.xml (New)

The new view is displaying a list control with a custom header text. The item aggregation of
the list is bound to the root path Invoices of the JSON data. And
since we defined a named model, we have to prefix each binding definition with the
identifier invoice>.

In the items aggregation, we define the template for the list that will be automatically repeated for each invoice of our test
data. More precisely, we use an ObjectListItem to create a control for each aggregated child of the
items aggregation. The title property of the list item is bound to properties of a single
invoice. This is achieved by defining a relative path (without / in the beginning). This works because we have bound
the items aggregation via items={invoice>/Invoices} to the invoices.


In the text bundle the title of the list is added.



eighteen − 3 =