フラグメント・スロットのデータ・コンテキストの設定

フラグメント・スロットはコンポーネント・スロットに似ているため、コンポーネント・スロットとほぼ同じ方法で、データ・コンテキストのテンプレート・スロットの概念に依存します。テンプレート・スロットを使用すると、スロット内のコンポーネントは、コンポーネントの周囲のページ・モデルおよびカスタム・コンポーネント内からデータにアクセスできます。次に、この概念を分解する方法を示します:

データ・コンテキストとは

フラグメント・スロットは、設計上、フラグメント作成者がプレースホルダーを残して、ユーザーが独自のコンテンツでカスタマイズできるようにします。一般的な例は、フラグメント・ビュー内で使用されるツールバーで、一連のデフォルト・ボタンを提供しますが、フラグメント・ユーザーが独自のボタンを追加するためのスロットもサポートしています。この場合、スロット・コンテンツはユーザーによって提供されますが、レイアウトのパースペクティブからはフラグメント(またはその中で使用されるコンポーネント)によって"managed"が提供されます。

多くの場合、フラグメント作成者は、oj-table、oj-list-view、oj-bind-for-eachなどのコンポーネントを使用します。このコンポーネントは、フラグメントによって各行のデータが提供される行のリストをスタンプします。各行のスタンプ・アウト時のレンダリング方法をユーザーが形成できるようにするフラグメント作成者は、スタンプ・コンポーネントが設定した(現在の行/アイテム)データへのアクセスを提供することもできます。たとえば、oj-list-viewは、$currentという標準変数を介してコンテキスト・アイテム・データを提供する"itemTemplate"スロットをサポートしています。

ヒント:

data-oj-as属性を使用すると、$currentの別名を定義できます。 data-oj-asが定義されている場合は、$currentのかわりに別名が使用されます。

リスト・ビューの例

ユーザー名およびロールのリストを表示するためにフラグメントで使用されるoj-list-viewの例を次に示します。コンポーネント(oj-list-view)が$current(または割り当てられたdata-oj-as名)を介してスロットに公開するデータ(ユーザー名およびロール)のシェイプを定義するには、最初にフラグメントのメタデータにdata属性を定義します:

"slots": {
  "userRowTemplate": {
    "data": {
      "$current": {
        "type": "object",
        "properties": {
          "data": {
            "type": "object",
            "properties": {
              "name": {
                "type": "string"
              },
              "role": {
                "type": "string"
              }
            }
          }
        }
      }
    }
  }
}

次に、次のようにフラグメント・ビューを実装できます:

<oj-list-view data="[[ $variables.userArrayDataProvider ]]">
  <template slot="itemTemplate">
    <oj-vb-fragment-slot bridge="[[vbBridge]]" name="userRowTemplate" context="[[ { $current: $current } ]]">
      <!-- Default template used if fragment consumers do not provide their own. -->
      <template>
        <p>
          <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
          <oj-bind-text value="[[$current.data.role]]"></oj-bind-text>
        </p>
      </template>
    </oj-vb-fragment-slot>
  </template>
 </oj-list-view>

この例では、テンプレート・スロット"itemTemplate"に、$current変数を介して現在の行のデータを提供するフラグメント・スロットが含まれています。フラグメント・スロットのデフォルト・テンプレートには、ユーザー名とロールが単純なテキスト(oj-bind-text)として表示されます。 "name"および"role"の値は、フラグメント、または周囲のページ・モデルではなくフラグメント内で使用されるスタンプ・コンポーネントによって提供されています。

フラグメントをページで使用すると、フラグメント・ユーザーにはデフォルトでユーザー名とユーザー・ロールのリストがテキストで表示され、リスト・アイテムのレンダリング方法をカスタマイズできます。次に例を示します:

<h1>Users</h1>
 <oj-vb-fragment bridge="[[vbBridge]]" name="user-list">
  <!-- Custom template for row with user data. -->
  <template slot="userRowTemplate">
    <h2 class="oj-header">
      <oj-bind-text value="[[ $current.data.name ]]"></oj-bind-text>
    </h2>
    <div>
      <oj-bind-text value="[[ $current.data.role ]]"></oj-bind-text>
    </div>
  </template>
 </oj-vb-fragment>

表の例

oj-tableは、$current (または割り当てられたdata-oj-as名)を介してコンテキスト行データを提供するテンプレート・スロット"rowTemplate"をサポートしています。次に、フラグメント内のoj-tableの例を示します:

<oj-vb-fragment name="products" bridge="[[vbBridge ]]">
  <template slot="productRowTemplateSlot" data-oj-as="productRow">
        <oj-bind-text value='[[ productRow.data[ "name" ] + ":" + productRow.data[ "code" ] ]]'></oj-bind-text>
  </template>
</oj-vb-fragment>

この例では、templateタグのdata-oj-as属性によって、$currentの別名が定義され、テンプレート・スロットのデータにproductRow変数を使用してアクセスできることが指定されています。別名を指定しない場合、$currentを使用できます。