sapui 5 Documentationを参考に、私が理解したdatabindingチュートリアルをまとめてみましょう.📝📝📝

📌 概要

モデルにデータがある場合は、UI要素にデータバインディングを適用し、データを同期させ、UIでデータ操作を行うことができます.すなわち、データバインディングは、モデルとビュー間の通信方式を定義する.
データバインディングでは、モデルとバインディングの保持が必要です.

モデルインスタンスは、データを有し、データを設定したり、サーバからデータを取得したりする方法を提供する.また、データにバインドを作成する方法も提供されます.

bindingインスタンスはbinding情報を有し、データ変更時に発生したイベントを提供する.

📌 記述コード(例)

データバインドの概念を簡単に把握した.では、sapui 5 docmantationから提供された例コードを直接叩くことで理解してみましょう.(作成したサンプルコードはgitアドレスにあります.参照してください.)

プロジェクトの設定

この例はvscodeで記述されており、初期ui 5設定はvscode設定を参照してください.初期アイテムを設定して実行すると、次の画面のように表示されます.

resourceBundle Model

manifest.jsonではi 18 nというモデルが基本的に定義されており、そのモデルのパス、タイプ、属性が示されている.
<-UI(View)にモデル内のデータを表示するにはデータバインドが必要なので、表示するデータと属性のパスを知る必要があります!

  "sap.app": {
  	...
    "i18n": "i18n/i18n.properties",
    ...
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "databinding.i18n.i18n"
        }
      }
    },

MainView.view.xmlには、以下のコードが設定されています.

<mvc:View
    controllerName="databinding.controller.MainView"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
    xmlns="sap.m">
	<Shell id="shell">
		<App id="app">
			<pages>
            	<!-- i18n Model에서 title이라는 propertyName으로 databinding이 되어있음 -->
				<Page id="page" title="{i18n>title}">
					<content />
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

i18n.propertiesには、titleの属性データを"databinding"に変換するように設定されている.

#title=Title 
title=databinding
appTitle=MainView
appDescription=App Description

変更したモデルのデータが反映されていることがわかります.

🔗 リファレンスアドレス
data binding tutorial (sdk)
データバインドコンセプト(blog)
Model (sdk)
View (sdk)