📌 概要

ハードコーディングsingle templateコントロールではなくfactory関数を使用して、実行時に受信したデータに基づいて他のコントロールを生成します.
この方法はより柔軟で,複雑または異機種のデータを表示することができる.

📌 例

view.xml

      <Panel headerText="{i18n>panel4HeaderText}" class="sapUiResponsiveMargin" width="auto">
        <List id="ProductList" headerText="{i18n>productListTitle}" items="{
									path: 'products>/Products',
									factory: '.productListFactory'}">
          <dependents>
            <core:Fragment fragmentName="databinding.view.ProductSimple" type="XML"/>
            <core:Fragment fragmentName="databinding.view.ProductExtended" type="XML"/>
          </dependents>
        </List>
      </Panel>

以前productlistを所有していたList XML要素はfragmentに折り畳まれます.そうしないとlistは空になります.このlistを埋め込むfactory関数がない場合、listは常に空です.

controller.js

'sap/m/ObjectAttribute'], function (..., ObjectAttribute) {
	"use strict";
	...
	ProductListFactory: function(sId, oContext) {
		let oUIControl;
		
		// clone에 의존하는 data를 기반으로 결정
		if (oContext.getProperty('UnitsInStock') === 0 && oContext.getProperty('Discontinued')) {
			// The item is discontinued, so use a StandardListItem
			oUIControl = this.byId('productSimple').clone(sId);
		} else {
			// The item is available, so we will create an ObjectListItem
			oUIControl = this.byId('productExtended').clone(sId);
			
			// The item is temporarily out of stock, so we will add a status
			if ( oContext.getProperty('UnitsInStock') < 1 ) {
				oUIControl.addAttribute(new ObjectAttribute({
					text : {
						path: 'i18n>outOfStock'
					}
				}));
			}
		}
		return oUIControl;
		
	}
}

factory関数は、前のステップで定義したXMLテンプレートと同様の関連バインドコンテキストの制御を返します.
このfactory関数が返すcontrol typeはsapです.m.Listオブジェクトはプロジェクト集約に適している必要があります.
この場合、作成するアイテムのコンテキストに格納されているデータに基づいて、標準ListItemまたはObjectListItemに戻ります.
現在の在庫レベルと製品が生産停止しているかどうかを確認し、返品する制御設備を決定します.どちらのオプションもXMLを配置します.
定義ビューロジックをロードして宣言し、現在のコントローラに割り当てることができます.在庫レベルが0でクローズされている場合、Product Simple(sap.m.StandardListItem).
そうでない場合は、ProductExtended(sap.m.objectListItem)を使用します.
いずれの場合も、XMLタグは1回だけロードするので、コントローラにhelper varaibleを保存して1回だけロードできます.
Singletonを作成します.リスト内の各項目について、コントローラに格納されている対応するコントロールをコピーします.このメソッドは、listプロジェクトのコンテキストにバインドできるコントロールの新しいコピーを作成します.
注意:factory関数は、生成されたコントロールのライフサイクルを担当します.
生産中止の製品は承知しておりますが、在庫が0の場合は一時欠品となります.この場合、Javascriptを使用して単一のObjectAttributeを追加し、controlに在庫のないメッセージを追加します.
XMLビューまたはfragmentでは、宣言定義と同様に、構文バインド属性をデータバインドできます.
この場合、テキストはリソースビームのプロパティにバインドされます.
プロパティはリストアイテムのサブアイテムであるため、割り当てられたすべてのモデルと現在のバインドコンテキストにアクセスできます.

ProductSimple.fragement.xml
このXMLは、在庫レベルが0であり、製品も停止している場合に使用されるStandardListItemを定義します.
これはinfo propertyで警告アイコンと製品Discountedメッセージを定義する簡単な例です.

<core:FragmentDefinition
	xmlns="sap.m"
	xmlns:core="sap.ui.core">
	<StandardListItem
		id="productSimple"

		icon="sap-icon://warning"
		title="{products>ProductName} ({products>QuantityPerUnit})"
		info="{i18n>Discontinued}"
		type="Active"
		infoState="Error"
		press=".onItemSelected">
	</StandardListItem>
</core:FragmentDefinition>

ProductExtended.fragment.xml
拡張例では、製品の詳細を表示するために、ObjectListItemが作成される.
propertyは、現在のデータバインドコンテキストのフィールドにバインドされているため、割り当てられたコントローラで定義されたタイプ、フォーマット、およびすべてのプロセッサを使用できます.
しかし,より複雑な論理はXMLで宣言的に定義することはできない.したがって、在庫レベルが0の場合、Javascriptを使用してコントローラに在庫情報のない単一オブジェクト属性を追加します.

<core:FragmentDefinition
	xmlns="sap.m"
	xmlns:core="sap.ui.core">
	<ObjectListItem
		id="productExtended"
		title="{products>ProductName} ({products>QuantityPerUnit})"
		number="{
			parts: [
				{path: 'products>UnitPrice'},
				{path: '/currencyCode'}
			],
			type: 'sap.ui.model.type.Currency',
			formatOptions : {
				showMeasure : false
			}
		}"
		type="Active"
		numberUnit="{/currencyCode}"
		press=".onItemSelected">
	</ObjectListItem>
</core:FragmentDefinition>

i18n.properties

# Product Details
outOfStock=Out of Stock

👋 databinding tutorial~

sapui 5が提供するデータバインドについては,大きなフレームワークの概念のみを議論した.後でdatabindingについて詳しく説明し、より多くのサンプルファイルを作成して共有します.databinding tutorialのエラーや説明の不足点については、メッセージまたはEメールを送ってください~~できるだけ早く修復します.🙏🙏🙏

🔗 リファレンス

SAPUI5 SDK Aggregation factory function

SAPUI5 SDK Factory Function

SAPUI5 SDK Fragment

githubサンプルファイルの模倣