ID #1156

テンプレートリファレンス

コンテキストを理解する

http://www.mobify.com/mobifyjs/docs/template-reference/

テンプレートとは、別のデータによって置き換えられる変数を持つHTMLドキュメントです。この別のデータとは評価されたkonf出力のことであり、これをテンプレートのためのコンテキストと呼びます。

コンテキストは、このテンプレートに適用する、konfが評価した全てのキーのツリーです。

Mobify.jsで開発を行う際、ブラウザのJavascriptコンソールからこのツリーの全てを見ることができます(使用法については、我々の付録をご覧ください(リンク))。要素の検証を行いたいページまで行き、コンソールを開きAll extracted data(全ての抽出されたデータ)を展開することで全ての評価されたキーを表示することができます。これらはどれもテンプレート内変数として使用可能です。Mobifyは内部キーを数多く生成します。これらのリストは、Reserved Keys(予約されたキー)(リンク)から参照してください。

 

ここで、「コンテキストのレベルを変える」と表記した場合、このコンテキストツリー内の階層を変えるという意味であることに注意してください。

 

{foo} – 変数: 単一の変数を選択してレンダ

konfファイル内でソースDOMからエレメントを選択し、選択したものを任意のテンプレートから波括弧構文で参照します:

ソースHTML入力:

<コード>

konf内で選択したものをキーに割り当てる:

<コード>

searchキー選択の結果をkonfに、テンプレート内変数としてレンダする:

<コード>

出力されるHTML:

<コード>

 

変数の評価

Zeptoコレクションはコレクション内のオブジェクトをイテレートし、それぞれのJavaScript outerHtml属性を取り、これらを連結させることで評価されます。

単一のDOMエレメントはそのouterHTML属性に評価されます。

文字列はデフォルトで全てエスケープされていることに注意してください

HTMLを出力したい場合は、フィルタを使用してください(下のフィルタリファレンスをご覧ください(リンク))

 

変数はまずコンテキストの現在のレベル内のキーから検索され、同レベル内に変数名と一致するものが見つからなかった場合、キーはコンテキスト内で次に高いレベルから検索されます。これは、キーが見つかるか、またはコンテキストの最高レベルに達するまで繰り返されます。

 

{foo|bar} – 変数フィルタ: 変数fooをフィルタbarを通して渡す

変数のレンダのされ方を変更したい場合、特にZeptoコレクションやDOMエレメントから生成された値においては、フィルタを使うことができます。テンプレートタグ内にパイプ記号|とフィルタ名を記述してください:

ソースHTML入力:

<コード>

konf内での選択:

<コード>

テンプレート内でwarning変数にフィルタを追加:

<コード>

HTML出力:

<コード>

テンプレートタグ内にフィルタ名とパイプ記号|を追記することで、複数のフィルタを適用することができます。フィルタは、それぞれ前のフィルタの出力に順に適用されていくことに注意してください。

使用可能なフィルタ

innerHTML – Zeptoコレクション又はDOMエレメントのinnerHTMLをレンダします。注意: このフィルタの出力はHTMLエスケープされているため、安全にHTMLとしてレンダするにはsでチェインしてください。

OpenTag – DOMエレメントのリテラルオープニングタグを出力します。注意: このフィルタの出力はHTMLエスケープされているため、安全にHTMLとしてレンダするにはsでチェインしてください。

CloseTag - DOMエレメントのリテラルクロージングタグを出力します。注意: このフィルタの出力はHTMLエスケープされているため、安全にHTMLとしてレンダするにはsでチェインしてください。

s – 安全にHTMLを出力します。InnerHTMLフィルタなどを通して出力されたHTMLエスケープされた文字列のエスケープを解除します。

 

{#foo} … {/foo} – 変数fooの属性へのアクセス、または降下

全ての変数やその属性はアクセス可能です。ただ属性にアクセスしたい場合は、より単純に{variable.attribute}構文を使用することができます:

ソースHTML入力:

<コード>

konf内にロゴ属性を持ったヘッダ変数を生成:

<コード>

テンプレート内でロゴ属性にアクセス:

<コード>

HTML出力:

<コード>

また、ヘッダブロックに降下することでもこれと同じく属性にアクセスすることができます。これは一つの変数に複数の属性を付与した場合に役立ちます。HTML出力は先の例と同じものになります:

<コード>

 

{#foo} … {.} … {/foo}

konf内で複数のエレメントのセットを返すような選択を行った場合、現在地を表す.記号を使用することでそれらのエレメントをイテレートすることができます。

ソースHTML入力:

<コード>

konf内で属性を持った変数を作成:

<コード>

header変数に降下しlogonav属性にアクセスする。また、navをイテレート:

<コード>

HTML出力:

<コード>

 

{>foo/} - 現在のテンプレート内にパーシャルfooを組み込む

パーシャル、すなわちテンプレート内に組み込まれた一部分は、テンプレートを別のテンプレートから構成することを可能にします:

パーシャルlogoのコンテンツ:

<コード>

foo.tmpl内に組み込むためにパーシャルを参照する:

<コード>

これで、logo.tmplfoo.tmpl内に挿入されます。

logo.tmplfoo.tmplを組み合わせたマークアップ:

<コード>

 

{+bar} … {/bar} – ブロックプレースホルダ

ブロックは、他のテンプレートにオーバーライドされうるテンプレートコードの一部分の定義を可能にします:

foo.tmplにオーバーライド可能なブロックheaderを追加:

<コード>

オーバーライドの用法については、ブロックオーバーライド(リンク)をご覧ください。

 

{<bar} … {/bar} – ブロックオーバーライド

foo.tmplにオーバーライド可能なブロックheaderを追加:

<コード>

組み込まれたテンプレートproducts.tmplからfoo.tmplheaderのコンテンツをオーバーライドする:

<コード>

ブロック内では、オーバーライドされるブロックから除外されるコンテンツにアクセスできる特別な変数があることに留意してください。この変数は_SUPER_と呼ばれ、ブロックの以前のコンテンツをオーバーライドする替りに継承することを可能にします。

<コード>

上の例では、_SUPER_を使用したヘッダの最終的なコンテンツは、両方のヘッダのコンテンツを合わせたものになります:

<コード?>

プレースホルダの用法についてはBlock Placeholders(リンク)を参照してください。

 

{?foo} … {/foo} – 条件文、変数fooの存在を確認

変数の存在を基に、条件分岐を行います。

<コード>

 

{%script} … {/script} – インラインスクリプトプラグマ

デフォルトでは、テンプレートはホワイトスペースを必要に応じて折りたたみます。これは、単一行のコメントをフィーチャするインラインスクリプトなどを使用する場合において、問題になります。

{%script}プラグマを使用することで、テンプレート内でインラインスクリプトを安全に扱うことが可能になります。

<コード>

JavaScriptを扱う(リンク)でより詳細に説明されています。

 

{! Comment !} - テンプレートコメント

{!!}で囲まれた文章はコメントとして扱われ、レンダされません。

<コード>

 

Mobify.desktop() - デスクトップに戻る

このアンカータグをテンプレートに追加することで、ユーザーにmobify前のサイトに戻ることを可能にします:

<コード>

 

モバイルに戻る

このアンカータグでユーザーにモバイルサイトに戻ることを可能にします:

<コード>

しかし、「モバイルに戻る」ボタンを非モバイル端末向けにデスクトップサイトに表示させるのは賢明ではありません。そのため次のようにして、デバイスに基づいて条件付きでこのエレメントを挿入することもできます:

<コード>

 

ベスト・プラクティス

テンプレートファイルネーミングの規則

テンプレートは.Tmp拡張子を使ってプロジェクトフォルダ内のsrc/tmpl/に保存しなければいけません。

 

 

ベーステンプレートを使う

テンプレート·ロジックの大部分は、パーシャルやブロックを使用して別のテンプレートから継承する必要があります。たとえば、base.tmpl

 

 

そしてHomeにも

 

 

接頭辞はx-によるスタイル属性を導入

Mobify.jsは、ソースDOMから選択された要素の属性と内容を保持します。ソースDOMから選択されたコンテンツからとテンプレートからのコンテンツを区別するために、テンプレートに入れる属性には接頭辞を加えると見やすくなるかもしれません。

 

 

テンプレートを使用して導入されたコンテンツを識別しやすくするためにも、テンプレートで導入されたすべてのクラスとIDx-接頭辞を付けることをお勧めします。

タグ: -

関連エントリー:

この FAQ にコメントする