jQueryテンプレートを使用したjQuery Mobileの動的データ

はじめに

すでに4番目のアルファ jQuery Mobileをリリースしており、これによりフレームワークの安定性が高まり、使いやすくなりました。まだ不足している唯一のものは、優れたドキュメントです。たとえば、JQMページへの遷移を示す標準ワークフローのみが説明されています。しかし、データを動的にロードする場合はどうでしょうか？
^{この記事では、javascriptとは何か、jQueryとJQMがどのように機能するかについて、少なくとも少しは理解していることを前提としています。}

ツール

そのため、タスクは簡単です。XHRを使用してデータを収集し、ユーザーに表示します。まず、何が自由に使えるかを見てみましょう。これらはjQueryとjQuery Mobileであり、本質的にモバイルデバイス用のコンテンツを適応させるjQuery拡張機能です。最も単純なオプションは次のようになります。

$。 get （ '/ data / url' 、 function （ data ） {
for （データ内の var item ） {
$ （ "#content" ）。 append （ "<p>" + item + "</ p>" ） ;
}
} ） ;

この例ではすべてが単純ですが、実際には、このアプローチは多くの労力とコード行を必要とするため、最良の選択肢ではありません。受信したデータを何らかの機能に渡し、テンプレートを表示して、美しいHTMLを取得できれば、はるかに簡単になります。そして、ここでjQueryテンプレートが役立ちます。

お試しください

そこで、動的にデータを受信し、JQMを使用して表示するページを作成してみましょう。サーバー関数APIを記述しないために、Flickrからデータを取得し、次のような$ .getJSON（）関数のドキュメントから例を取り上げます。

$。 getJSON （ " api.flickr.com/services/feeds/photos_public.gne?jsoncallback=？" 、
{
タグ：「猫」、
tagmode ： "any" 、
フォーマット：「json」
} 、
関数（データ） {
$。 each （ data。items 、 function （ i 、 item ） {
$ （ "<img />" ）。 attr （ "src" 、 item。media。m ）。 appendTo （ "#images" ） ;
if （ i == 3 ） falseを返します。
} ） ;
} ） ;

もちろん、 関数（データ）{}内にあるすべてのものは必要ありません。これをテンプレートに変更します。

クッキングパッド

まず、console.log（データ）を使用してサービスから何が得られるかを見てみましょう。以下は、私たちが興味を持っている部分の簡略リストです。

対象
ジェネレータ： "http://www.flickr.com/"
items：配列[20]
0：オブジェクト
著者： "nobody@flickr.com（e m i m i）"
説明： "<p> <a href="http://www.flickr.com/people/emimi/"> emimi </a>が写真を投稿しました：</ p> <p> <a href =" http ... 」
リンク：「http://www.flickr.com/photos/emimi/5587960723/」
メディア：オブジェクト
m： "http://farm6.static.flickr.com/5307/5587960723_7d9c0a7a25_m.jpg"
タグ：「cat romeo貓羅密歐囉咪歐」

興味のあるデータがあるアイテムの配列があることがわかります。写真のサムネイルでリストを作りたいとしましょう。次に、配列の各要素は<li>タグ内にある必要があり、テンプレートは以下のリストに示すようになります。

< script id = "dataTemplate" type = "text / x-jquery-tmpl" >
< li role = "option" >
<a href = "#">
< img src = "$ {media.m}" >
< h3 > $ {$（説明）.text（）} < / h3 >
< p > $ {tags} < / / p >
</a>
< / li >
< / スクリプト >

このテンプレートは、Flickrの画像のプレビュー、説明をメインテキスト、タグをサブテキストとして表示します。 jQueryテンプレートは、テンプレート内でjQuery自体を試すことができる非常に強力なライブラリであることに注意してください。たとえば、前のリストで行ったように、説明からタグをクリアします。

メインを追加

次に、すべての魔法が発生するボタンをクリックし、データが入力される空のリストをクリックして、ページにボタンを追加する必要があります。次のようになります。

< div data-role = "content" >
<a href = "#" data-role = "button" data-theme = "b" id = "load-data">データのロード< / / a >
< ul data-role = " listview" data-inset = "true" id = "data-listholder" > < / / ul >
< / div >

これを機能させるには、javascriptを少し追加します。それがどのように機能するかの説明はすぐ下にあります。

//ドキュメントのすべての準備を整えます
$ （ドキュメント）。準備完了（関数（） {
$ （ "＃load-data" ）。クリック（機能（） {
//ロードインジケータを表示
$。モバイル。 pageLoading （） ;
$。 getJSON （ " api.flickr.com/services/feeds/photos_public.gne?jsoncallback=？" 、
{
タグ：「猫」、
tagmode ： "any" 、
フォーマット：「json」
} 、
関数（データ） {
//データをテンプレートにレンダリングし、リストに追加します
$ （ "#dataTemplate" ）。 tmpl （データ。項目）。 appendTo （ "＃data-listholder" ） ;
//リストビューを更新
$ （ "＃data-listholder" ）。 listview （ "refresh" ） ;
//ロードインジケーターを非表示にします
$。モバイル。 pageLoading （ true ） ;
} ） ;
} ） ;
} ） ;

1〜3行目はすでにおなじみです。ページをロードした後、クリック時にボタンにイベントリスナーをハングアップします。押されると、次のことが起こります：最初に、 pageLoading（）関数は美しいローディングインジケーターを表示します。次に、データを受信するFlickrにリクエストがあります。 jQueryを使用してデータを受信した後、テンプレートを含むDOM要素を選択し、 tmpl（）関数を使用します。tmpl（）関数は、このテンプレートを使用して、受信データのitems配列に基づいてHTMLを作成します。 append（）を使用して生成されたHTMLは、空のリストに追加されます。リストにデータを単純に追加すると、jQuery Mobileはページの読み込み後またはスクリプトの要求時にすべてをレンダリングするため、かなりprettyいHTMLを取得します（jsコードの17行目をコメントアウトしてデータを要求できます）。したがって、リストをlistview（ 'refresh'）で更新したいと言う必要があります。その後、 pageLoading（true）関数を使用して、読み込みインジケーターが非表示になります。そして、私たちは（この場合、完全ではない）きちんとしたリストを見ます。
それだけです。jQueryMobileを使用して、データを動的にダウンロードして表示しました。

おわりに

完全なソースコードはGitHubにあります。 jQueryテンプレートの詳細な説明は、jQuery Webサイトの適切なセクションにあります。質問をすることができますし、すべきです、私はすべてに答えようとします。