Data Binding Tutorial - 08 Binding Paths: Accessing Properties in Hierarchically Structured Models

홍종화·2021년 10월 16일
0

databinding

목록 보기
8/16

📌 개요

resource model의 필드가 flat한 구조로 배열되어 있다. 즉, 프로퍼티의 계층 구조가 없다. 하지만 이건 resource model의 경우에만 해당된다. JSON, OData Model의 경우 프로퍼티는 계층 구조로 되는 경우가 많다. 따라서 이번 챕터에서는 계층구조로 된 model의 datainding을 살펴보자.

📌 예제

  • MainView.controller.js
				{
					firstName: "Jonghwa",
					lastName: "Hong",
					enabled: true,
					panelHeaderText: "One-way Data Binding",
					address: {
						street: "sangdo",
						city: "seoul",
						zip: "123456",
						country: "kr"
					}
  • MainView.view.xml
    특별한 장치는 없고 해당 프로퍼티의 깊이를 / 로 구분지어서 binding 해주면 된다.

							<Panel headerText="{i18n>panel2HeaderText}" class="sapUiResponsiveMargin" width="auto">
									<content>
										<l:VerticalLayout>
										<Label labelFor="address" text="{i18n>address}:"/>
										<FormattedText class="sapUiSmallMarginBottom"
											htmlText="{/address/street}&lt;br>{/address/zip} {/address/city}&lt;br>{/address/country}"
											id="address" 
											width="200px"/>
										</l:VerticalLayout>
										</content>
								</Panel>	

💡 binding path는 대소문자를 고려한다. 👊👊👊
대소문자를 잘못 표기해서 binding이 되지 않을 경우 에러도 나지 않는다. 저자는 다른 코드들에서 에러가 나는가 하고 코드를 분석했던 기억이 있다. binding이 되지 않고 에러가 나지 않는다면 경로가 잘못 표기되지 않았는지 한번 살펴보길 바란다.

🔗 참조

profile
coding everywhere

0개의 댓글