Zen Mojo の既定のページ・マネージャおよびヘルパー・プラグイン

$content レイアウト・オブジェクト

$content レイアウト・オブジェクトには、任意の HTML を含めることができます。ただし、その HTML は適格でなければなりません。以下に例を示します。

  var htmlstring =        '<h2>The Demo Team</h2>'
  htmlstring=htmlstring + '<p><strong>You have been invited to a meeting in Boston</strong></p>';
  htmlstring=htmlstring + '<p>Are you available tomorrow at 10am?</p>';
  htmlstring=htmlstring + '<p class="ui-li-aside"><strong>6:24 </strong>PM</p>'
  myLayout = {
    children: [ { type: '$content', title: '$content demo', content:htmlstring } ]
  }

$if レイアウト・オブジェクト

$if レイアウト・オブジェクトは、ページに特定のオブジェクトを表示するかどうかを制御するために使用されます。$if オブジェクトは、プロパティ value、expectedValue、および children を提供します。value が expectedValue の場合、Zen Mojo は children プロパティで提供されているレイアウト・オブジェクトをレンダリングします。それ以外の場合、Zen Mojo は $if オブジェクトについて何もレンダリングしません。

$loop レイアウト・オブジェクト

$loop レイアウト・オブジェクトは汎用目的の反復子です。例えば、これを使用して、さまざまな行があるテーブルを作成します。ZMdemo.html5.baseTemplateOpens in a new tab にある例を参照してください。その他の多くのプラグインは、$loop オブジェクトを内部的に使用します。ループは入れ子にすることができます。

特殊な場合に、レイアウト・オブジェクトは、レイアウト・グラフ内で使用できる変数を提供します。例えば、既定の Mojo ヘルパー・プラグインには、レイアウト・オブジェクト $loop があります。これは、$loopindex、$loopnumber、$loopValue などの変数を提供します。

変数 variablename, を参照するには、構文 '=[variablename]' を使用します。

以下の例は、$loopValue 変数の参照を示しています。また、この例では、HTML5 ヘルパー・プラグインからの $div レイアウト・オブジェクトも使用します。

    myLayout = {
        children: [
            { type: '$loop', title: 'Basic $loop demo', value:['apples','bananas','coconuts'],
             children: [
              {type:'$div', $content:'=[$loopValue]'}
             ]}
        ]
    }

通常、$loop オブジェクトを使用するには、以下のようにします。

• このオブジェクトの value プロパティを指定します。これは、配列です。value 配列内の項目の数により、ループ内の項目の数が決定されます。

  各配列項目は、オブジェクト、配列、またはリテラル値にすることができます。配列項目がオブジェクトの場合、通常、各オブジェクトは同じプロパティのセットを持っている必要があります。同様に、配列項目が配列の場合、各配列は同じ構造を持っている必要があります。

• このオブジェクトの children プロパティを指定します。これはレイアウト・オブジェクトの配列です。ループには、value 配列の項目ごとに、これらのオブジェクトのセットが 1 つ含まれています。

  これらのレイアウト・オブジェクトについては、value 配列の現在の項目を参照できます。そのようにするには、構文 '=[value to obtain]' を使用します。

  例えば、配列項目がオブジェクトの場合は、'=[property]' を使用します。ここで、property は配列内のいずれかのオブジェクトのプロパティです。(また、ドット構文を使用して、プロパティのプロパティ (以下同様に続く) を参照できます。)

例：基本の $loop デモ

以下に、Zen Mojo HTML5 ヘルパー・プラグインから $div オブジェクトも使用している例を示します。

  myLayout = { children: [
    { type: '$loop', title: 'Basic $loop demo', 
      value:[
        {product:'apples',  sku:'SKU-001'},
        {product:'bananas', sku:'SKU-002'},
        {product:'coconuts',sku:'SKU-003'}
      ],
      children: [ {type:'$div', title:'=[product]', $content:'=[sku]'} ]
    }
  ]}

$loop 内で使用可能な変数

$loop を使用する場合、作成した変数の他に、以下の変数をレイアウト・グラフ内で使用できます。

• $loopIndex は、ループの繰り返しに使用される、0 から始まるインデックスです。

• $loopNumber は、ループの回数です。この変数は $loopIndex + 1 です。

• $loopValue は、value プロパティからの現在の配列項目です。

• $loopKey は TBD です。

  $loop 内のレイアウト・オブジェクトの場合、Zen Mojo はそのオブジェクトの key プロパティに elementkey:index という複合値を指定します。ここで、elementkey は、メソッドで定義されたこのレイアウト・オブジェクトの key プロパティの値です。また、index は、ループの繰り返しに使用される、0 から始まるインデックスです。

例：$loopValue 変数と共に使用される $loop

以下の例では、value プロパティの文字列の配列を使用します。次に、$loopValue 変数を使用して、それぞれの値を表示します。また、前述の例と同様に、HTML5 ヘルパー・プラグインからの $div レイアウト・オブジェクトを使用します。

  myLayout = { children: [
    { type: '$loop', title: 'Basic $loop demo', 
      value:['apples','bananas','coconuts'],
      children: [ {type:'$div', $content:'=[$loopValue]'} ]
    }
  ]}