http://www.mobify.com/mobifyjs/docs/konf-reference/
$(selector)
{<konf} ... {/konf} ブロック内では、$はZeptoオブジェクトをリファレンスします。そのコンテキストは、ソースDOM文書にバインドされています。
普通のDOMとの違い
ソースDOM内では、リソースのフェッチを引き起こす要素に属性の前にはx-が付いています。
タグ接頭辞の属性
Img src, width, height
Iframe src
Script scr, type
Link href
Style media
レンダリングのために、すべての接頭辞はimg[x-width]とimg[x-height]を除いて削除されます。
OUTPUTHTML
konfで特殊なキーである。それに割り当てられた文字列はすべて、ページの出力としてすぐにレンダリングされます。このような理由から、それは常にkonfオブジェクトの最後のキーとして宣言する必要があります:
falsey値がOUTPUTHTMLに割り当てられている場合は、元のページがレンダリングされます。
Context.data(key)
以前に割り当てられたキーの値を返します。 konfは、上から下へと判定されているので、以前に割り当てられたキーの値にアクセスすることも可能です。例えば、Footerのために作られたセレクションをContentのために再利用したいと思うかもしれません。
これでFooterに、Contentキーの値が代入されます。
可変解像度
context.dataは最も近いレベルで一致するキーを返します。もしキーが現在の階層で検出されない場合は、親の階層に上がり、再試行します。
デフォルトでは、プロジェクトのtmpl/フォルダ内の全ての.tmplファイルはcontext.tmplが利用できます。
一般的なパターンはkonfの中のキーにテンプレート名を割り当て、後でcontext.dataでそれを調べることです。テンプレート名はその後context.tmplに入れ、OUTPUTHTMLで出力で出来るようなります。
これはTemplateNameキーに値"home"を割り当てます。 context.dataは値を探し出したらcontext.tmplに渡し、context.tmplが一致するテンプレートを見つけ、それをレンダリングします。その結果がブラウザへの出力です!
Context.choose(obj1[,obj2[, …]])
引数としてオブジェクトの可変数を受け入れることと、最初に一致したものを実行します。現在レンダリングされているページに基づいて特定の選択を行うのに便利です。
全ての必要なキー(!から始まるキー)が引数と一致するのであれば、truthyな値に判定される。
この例では、!homeに割り当てられている機能がtruthy値と判定された場合には、最初の引数が一致します。そうでない場合は、次の引数をテストされることになります。
必要なキーを持たない引数は常に一致します。
一致する引数が検出されなかった場合、context.chooseはundefinedをリターンします。
複数の必須キーを作成して"and"条件を作れます。
この場合は、productCarouselとsaleItemsが両方truthyでなければ引数にマッチしません。
konfにおける一般的なパターンは、context.chooseを使用してテンプレートの特定のコンテンツを選択し、後でテンプレート名として使用されるキーを割り当てるすることです:
必修セレクションのTruthy度、!接頭辞の付いたキー
context.chooseは、次の条件のいずれかに一致する場合truthyと値を判断します。
これらの条件のどれも当てはまらない場合の値はfalseyとみなされます。
必要なセレクションでDOMを変更しないでください
全ての引数内の必要なキーを判定することができます。引数が一致した時のみ、必須じゃないキーが判定されます。もし DOMが必要なキーで変更された場合、konfの判定に影響を及ぼす可能性があり、後でエラーのデバッグする際、困難に繋がります。必要なキーでDOMを変更しないでください。DOMの変更作業は必須ではないキーで行なってください。
Mobify.urlmatch()でURLをマッチング
Mobify.jsは、URLのパス部分のパターンに基づいて組み合わせを作る便利な方法としてMobify.urlmatch()関数を提供しています。
引数のpath expression、またはJavaScript RegExpオブジェクトを含む文字列として受け取り、window.location.pathnameに対する表現に一致する関数を返します。
返された関数は引数を持たず、それが一致していたら正規表現オブジェクトを返し、それ以外の場合はfalseを返します。
もっと詳しく参照したい場合Mathcing Templates to URLsを御覧ください。
既定キー
次の既定キーを含むデフォルトkonfによって拡張されます:
!_match
テンプレート一致関数、Mobify Studioで使われる
_url
テンプレートのプロトタイプページURL、Mobiy Studioで使われる
$html
ソースDOMの<html>要素へのリファレンス
$head
ソースDOMの<head>要素へのリファレンス
buildDate
mobify.jsファイルが制作された日
config.configDir
Mobify.jsがロードされた場所までのディレクトリパス
Config.configFile
Mobify.jsへのパス
Config.HD
デバイスが高密度ディスプレイを持っている場合はtrueになるフラグ
Config.isDebug
Mobify.jsがデバッグモードを起動している時にtrueになるフラグ
Config.orientation
横より高かったら”portrait”、縦より長かったら”landscape”となる文字列
Config.os
完治したOSを文字列に表す
Config.path
mobify.jsファイルがロードされた場所からのパスを表す文字列
config.started
ページが適応されているかどうかを記録するために使用する内部フラグ
config.tagVersion
このサイトで使用されているMobifyタグのバージョン
config.touch
タッチイベントがサポートされている場合はtrue、それ以外の場合はfalseになるフラグ
configName
project.jsonから持ってきたプロパティ-大抵の場合あなたのサイトの特有の識別子
cssName
適用するCSSファイルの名前を返す関数
imageDir
Mobifyのアダプティブ特定の画像が保存されている場所へのパスを返す関数
mobileViewport
メタビューポートタグの内容が送信される
siteConfig
アナリティクスの設定情報を格納しているオブジェクト
touchIcon
iOSデバイス上でこのウェブサイトのブックマークアイコンとして使用するファイルの場所
unmobify
ページがunmobifiedされているかどうかを記録するために使用する内部フラグ
お勧め:
特定のページにテンプレートを割り当てるときに、単一のセレクタを避け、より完全なDOMアウトラインを行なってください
必要なセレクタでソースDOMを変更しないでください