[UI5] Aggregation Binding

🙄 invoice를 생성해보자.

App.view.xml

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

InvoiceList.view.xml

view폴더에서 새로운 파일 InvoiceList.view.xml을 생성한다.

<mvc:View
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <List
        headerText="{i18n>invoiceListTile}"
        class="sapUiResponsiveMargin"
        width="auto"
        items="{invoice>/Invoices}" >
        <items>
            <ObjectListItem
                title="{invoice>Quantity} x {invoice>ProductName}" />
        </items>
    </List>    
</mvc:View>

List 모듈은 배열을 사용하는 모듈이기 때문에 invoice라는 모델안의 Invoices 프로포티로 배열로 된 데이터 Invoices를 바인딩 해준다.

그럼 현재 List의 items에는 배열 Invoices가 바인딩 되어있는데, 바인딩된 배열안에 객체들이 있다. aggregation안에 있는 모듈이 반복되면서 객체를 순서대로 하나씩 가져오게 된다.

배열사용하는 모듈에는 List, Table, Select, ComboBox가 있다. 이 모듈들은 배열로 된 데이터를 바인딩 해줘야 하고 aggregation 부분을 length만큼 반복시킨다. for문으로 인식하면 이해가 쉽다.

{invoice>Quantity} 배열안에 들어있는 객체의 프로포티 값을 가져온다.

반복되는 모듈안에서는 /를 생략한다.

i18n_ko.properties

인보이스의 타이틀을 입력한다.

invoiceListTile=Invoices

---

😊 데이터를 넣어보자.

아이템의 title을 "{invoice>Quantity} x {invoice>ProductName}"로 해놨기 때문에 Quantity x ProductName으로 나오는것을 확인할 수 있다.

invoices.json

새로 json파일을 만들고 파일을 새로 생성한다.

{
  "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"
    }
  ]
}

component.js

새로 생성한 json파일을 읽어오자. init함수 안에 로직을 추가한다.

         var that = this;

         $.ajax({
             url:"./json/Invoices.json",
             type: "get",
             success: function (oResult) {
                 var oInvoiceModel = new JSONModel(oResult);
                 that.setModel(oInvoiceModel, "invoice");
             }
         });

this는 기존로직의 UIComponent를 가리키게 하기 위해 success 함수 밖에다가 선언해준다. this를 어디서 사용하냐에 따라 this가 가리키는게 달라지는데 success함수에서 this하면 다른애를 가리키게 된다.

파일을 가져오는데 성공했을시 oResult에 담고 데이터를 모델에 담아 모델을 invoice 뷰에 바인딩한다.