ID #1157

Konfの理解

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

konfはすべてMobifyプロジェクトで必要なJavaScriptファイルです。デフォルトプロジェクトスカフォールドの中では、src / mobify.konfに存在します。これは、ページが個々のデバイス用に変換される方法を制御したり、ソースDOMから要素を選択したり、テンプレートを選択し、ブラウザへの出力をレンダリングするための責任があります。

 

Konf理論

これが最小限のmobify.konfである

 

 

{<konf} ... {/ konf}ブロックの内側でkonfオブジェクトを宣言します。konfオブジェクトにキー OUTPUTHTMLを与え、HTMLストリングを返す関数に割り当てます。 konfオブジェクトが判定されると、OUTPUTHTMLに割り当てられた関数が呼び出されます。 OUTPUTHTMLに割り当てられた値はすぐにブラウザにレンダリングされます。

 

konfオブジェクトは通常のJavaScriptオブジェクトと同じなので他のキーも追加できます:

 

 

ここでは$(‘body’)を呼び出し、結果を返してくれる要となるボディ要素を追加しました。 konfブロック内では、$Zeptoオブジェクトを参照しており、要素を選択するための主要な方法です。

この場合、ソースDOM<body>要素を返します。

Konfのキー値は選択を返す関数でなければなりません:

 

 

全てのkonfのキー機能はコンテキストと呼ばれる引数が渡されます。引数はオプションで、追加機能を有効にします。

 

 

ここでは、画像に割り当てられている機能はcontext.dataを使い、以前割り当てられたボディ要素の値を探し出します。それはソースDOM<body>要素を含むZeptoセットです。次にそのZeptoの’find’関数を使用して、そのすべての子要素を探しだします。

 

実践Konf

多くの場合は、ヘッダーのような要素は、サイトの各ページに表示したいと思うでしょう。グローバル選択はkonfに複数のキーを追加することによって作ることができます:

 

 

時々あなたのサイトの別のページに別のテンプレートを使用したいと思う事もあるでしょう。例えば、ホームページを適応させるためのhomeテンプレートを使用しながら、製品一覧のページにはproductテンプレートを使用することができます。

 

konfの内部でcontext.chooseでテンプレートを選択し、次にcontext.tmplをそのテンプレート名書き換えることで処理することができます。

 

context.chooseは、引数としてオブジェクトの可変数を受け入れることと、最初に一致したものを判定します。全ての!から始まるキーがtruthy値と判定されたのなら引数は一致すると言われています。

 

上記の例では、コンテンツが判定されたとき、context.chooseが呼び出されます。これは、最初の引数をチェックして必要なキー、homeを見つけ出します。 もし$(‘#home’)がソースDOM内で見つかった場合、最初の引数が一致します。 context.chooseはその後にグループコンテンツの下にTemplateNamehomeキーを追加します。$(‘#home’) が見つからない場合は次の引数に移動し、このプロセスを繰り返します。

 

その後、OUTPUTHTMLが判定されたとき、content.templateNameの値でレンダリングするテンプレートを決定します。

タグ: -

関連エントリー:

この FAQ にコメントする