ID #1158

Konf リファレンス

 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を変更しないでください

タグ: -

関連エントリー:

この FAQ にコメントする