Spry リピート領域の作成

データを表示するためのリピート領域を追加できます。 リピート領域とは、データ表示の必要に合わせてフォーマットを設定できる単純なデータ構造です。 たとえば、AP div エレメントなどのページレイアウトオブジェクト内に写真のサムネールを並べて表示する場合にリピート領域を使用できます。

  1. [挿入]-[Spry]-[Spry 繰り返し] を選択します。
    [挿入] パネルの [Spry] カテゴリにある [Spry 繰り返し] ボタンをクリックする方法もあります。
  2. オブジェクトコンテナの場合は、タグのタイプに応じて <div> または <span> オプションを選択します。 初期設定では <div> コンテナを使用します。
  3. [繰り返し] (初期設定) または [子の繰り返し] オプションを選択します。
    高度な柔軟性が必要な場合は、[子の繰り返し] オプションを使用するとよい場合があります。このオプションでは、データ検査が、子レベルで、リストの各行に対して行われます。 たとえば、<ul> リストがある場合、データが <li> レベルでチェックされます。 [繰り返し] オプションを選択した場合は、データが <ul> レベルでチェックされます。 [子の繰り返し] オプションが特に役立つのは、コードで条件式を使用する場合です。
  4. メニューから Spry データセットを選択します。
  5. テキストまたはエレメントがすでに選択されている場合は、これらを囲むか置き換えることができます。
  6. [OK] をクリックするとページにリピート領域が表示されます。
    注意： すべての Spry データオブジェクトは領域内に含める必要があるため、リピート領域を挿入する前にページに Spry 領域が作成されていることを確認してください。
  7. [OK] をクリックすると、Dreamweaver によってページに領域プレースホルダーが挿入され、「ここに Spry 領域のコンテンツを挿入」というテキストが表示されます。 このプレースホルダーテキストは、テーブルやリピートリストなどの Spry データオブジェクトと置き換えることや、[バインディング] パネル ([ウィンドウ]-[バインディング]) から動的データと置き換えることができます。
    動的表示エレメントを表示する [バインディング] タブ
    [バインディング] パネルには、データセットから取得できるデータが表示されます。

    注意： [バインディング] パネルには、組み込みの Spry エレメントである ds_RowID、ds_CurrentRowID、および ds_RowCount も表示されています。 これらは、動的詳細領域の更新方法を定義するときにユーザーがクリックした行を定義するために使用されます。
  8. プレースホルダーテキストを Spry データオブジェクトに置き換えるには、[挿入] パネルの対応する Spry データオブジェクトのボタンをクリックします。
  9. プレースホルダーテキストを動的データと置き換えるには、次のいずれかの操作を行います。

    • [バインディング] パネルからエレメントを選択テキストの上部にドラッグします。

    • コードビューで、エレメントのコードを直接入力します。 {dataset-name::element-name} のフォーマットを使用します。たとえば、{ds1::category}. または {dsProducts::desc} のようにします。 ファイル内で 1 つのデータセットのみを使用している場合、またはその領域に対して定義した同じデータセットからのデータエレメントを使用している場合は、データセット名を省略して単に {category} または {desc} と書くことができます。

    領域のコンテンツを定義するために使用する方法にかかわらず、HTML コードには次のコード行が追加されます。

    <div spry:region="ds1">{name}{category}</div> 
<div spry:region="ds2">{ds1::name}{ds1::descheader}</div>