ID #1155

テンプレートを理解する

 Mobifyでは、テンプレートとはHTMLマークアップに加えて、konfから選択したものに置き換えられる変数を含むテキストファイルです。

テンプレートについてはmobifyjs.comにて「テンプレートを理解する」ページで詳細に説明されています。

http://www.mobify.com/mobifyjs/docs/understanding-templates/

 

テンプレートを理解する

Mobifyでは、テンプレートとはHTMLマークアップに加えてレンダリング時にkonfから選択したものに置き換えられる変数を含むテキストファイルです。

テンプレートの理論
一般的なパターンは、content.templateNameにテンプレート名を割り当て、後にcontext.tmplを呼び出すことです。
<
コード>
content.templatename
に割り当てられている名前が’home’の場合、src/tmpl/home.tmplからコンパイルされたテンプレートがレンダリングされます。これについてはKonf Reference(リンク)でより詳細に説明されています。

デフォルトでは、Mobify.jssrc/tmpl/.tmplファイルをコンパイルし、context.tmpl向けに利用可能にします。

テンプレートとはHTMLドキュメントを作成するテキストファイルです。簡単なホームテンプレートは、次のようなものです:

<コード>

content.products<div>エレメントのまとまりを選択した場合、context.tmpl('home')を呼び出すことにより、選択されたデータを基にテンプレートが評価され、次のマークアップを含む文字列が生成されます:

<コード>



実際のテンプレート

一般的にウェブサイトは皆ヘッダ、フッタ、ベース、そしてページ固有のテンプレートという風に、同じようなテンプレートを使用しています。Mobifyでは最初にプロジェクトを作成するとき、これら様々なテンプレートを土台に組み込みます。例として、一般的なホームテンプレートは通常次のようなものです:

<コード>

{>base/}とはパーシャル(partial)、つまりテンプレート内に組み込まれた一部であり、ベーステンプレートをそのペアレント()テンプレートとして使用します。{<content}とはベーステンプレート内ブロックプレースホルダをオーバーライドするブロックオーバーライドです。

こちらはベーステンプレートのベーシックな用例です:

<コード>

{+context}がホームテンプレート内でオーバーライドされているブロックプレースホルダです。また{>_header}{>_footer}も使用しており、これら2つのパーシャルはコンテンツブロックの上下に_header_footerを挿入します。そのため、ベーステンプレートを組み込む全てのページには、ヘッダとフッタが挿入されます。

タグ: -

関連エントリー:

この FAQ にコメントする