UI5-文檔-4.20-Aggregation Binding

如今咱們已經爲咱們的應用創建了一個良好的結構，是時候添加更多的功能了。經過添加一些JSON格式的發票數據，咱們開始探索數據綁定的更多特性，這些發票數據顯示在面板下面的列表中。

 

Preview

 

A list of invoices is displayed below the panel

Coding

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

 

webapp/Invoices.json (New)

{

  "Invoices": [

        {

          "ProductName": "Pineapple",

          "Quantity": 21,

          "ExtendedPrice": 87.2000,

          "ShipperName": "Fun Inc.",

          "ShippedDate": "2015-04-01T00:00:00",

          "Status": "A"

        },

        {

          "ProductName": "Milk",

          "Quantity": 4,

          "ExtendedPrice": 9.99999,

          "ShipperName": "ACME",

          "ShippedDate": "2015-02-18T00:00:00",

          "Status": "B"

        },

        {

          "ProductName": "Canned Beans",

          "Quantity": 3,

          "ExtendedPrice": 6.85000,

          "ShipperName": "ACME",

          "ShippedDate": "2015-03-02T00:00:00",

          "Status": "B"

        },

        {

          "ProductName": "Salad",

          "Quantity": 2,

          "ExtendedPrice": 8.8000,

          "ShipperName": "ACME",

          "ShippedDate": "2015-04-12T00:00:00",

          "Status": "C"

        },

        {

          "ProductName": "Bread",

          "Quantity": 1,

          "ExtendedPrice": 2.71212,

          "ShipperName": "Fun Inc.",

          "ShippedDate": "2015-01-27T00:00:00",

          "Status": "A"

        }

  ]

}

 發票文件僅包含5張JSON格式的發票，咱們可使用它們在應用程序中綁定控件。JSON是一種很是輕量級的數據存儲格式，能夠直接用做SAPUI5應用程序的數據源。

 

webapp/manifest.json

{

…

  "sap.ui5": {

        "rootView": "sap.ui.demo.walkthrough.view.App",

[…]

        "models": {

          "i18n": {

               "type": "sap.ui.model.resource.ResourceModel",

               "settings": {

                 "bundleName": "sap.ui.demo.walkthrough.i18n.i18n"

               }

          },

          "invoice": {

               "type": "sap.ui.model.json.JSONModel",

               "uri": "Invoices.json"

          }

        }

  }

}

 咱們將一個新的模型發票添加到描述符的sa .ui5部分。此次咱們須要一個JSONModel，所以咱們將類型設置爲sa .ui.model.json.JSONModel。uri鍵是相對於組件的測試數據的路徑。經過這個小配置，咱們的組件將自動實例化一個新的JSONModel，它從發票裝載Invoices.json文件。最後，實例化的JSONModel做爲命名模型發票放到組件上。命名的模型在咱們的應用程序中是可見的。

請注意：自動模型實例化僅在SAPUI5 1.30版本中可用。若是使用舊版本，能夠在組件的onInit方法中手動實例化應用程序的資源包和其餘模型。就像咱們在步驟9:組件配置中對資源包所作的那樣。Step 9: Component Configuration.

 

webapp/view/App.view.xml

<mvc:View

   controllerName="sap.ui.demo.walkthrough.controller.App"

   xmlns="sap.m"

   xmlns:mvc="sap.ui.core.mvc"

   displayBlock="true" >

   <App class="myAppDemoWT">

      <pages>

         <Page title="{i18n>homePageTitle}">

            <headerContent>

               <Button

                  icon="sap-icon://hello-world"

                  press="onOpenDialog"/>

            </headerContent>

            <content>

               <mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/>

               <mvc:XMLView viewName="sap.ui.demo.walkthrough.view.InvoiceList"/>

            </content>

         </Page>

      </pages>

   </App>

</mvc:View>

 在app視圖中，咱們添加了第二個視圖來顯示面板下面的發票。

 

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

<mvc:View

   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}"/>

      </items>

   </List>

</mvc:View>

新視圖顯示一個帶有自定義標題文本的列表控件。列表的項聚合綁定到JSON數據的根路徑發票。因爲咱們定義了一個命名模型，咱們必須在每一個綁定定義前面加上標識符invoice>。

在items聚合中，咱們爲列表定義模板，該列表將爲咱們的測試數據的每一個發票自動重複。更準確地說，咱們使用ObjectListItem爲項聚合的每一個聚合子控件建立控件。列表項的title屬性綁定到單個發票的屬性。這是經過定義一個相對路徑(沒有/在開頭)來實現的。這是由於咱們經過items={invoice>/ invoice}將項目聚合綁定到發票上。

 

webapp/i18n/i18n.properties

# App Descriptor

appTitle=Hello World

appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

 

# Hello Panel

showHelloButtonText=Say Hello

helloMsg=Hello {0}

homePageTitle=Walkthrough

helloPanelTitle=Hello World

openDialogButtonText=Say Hello With Dialog

dialogCloseButtonText=Ok

 

# Invoice List

invoiceListTitle=Invoices

 

Parent topic: WalkthroughIn the text bundle the title of the list is added.

Previous: Step 19: Reuse Dialogs

Next: Step 21: Data Types

Related Information

Lists

API Reference:sap.m.List

Samples:sap.m.List

List Binding (Aggregation Binding)