home contents changes options help
last edited 3 months ago by nyusuke
文書操作

20 Minute Wiki Page 5

AJAXが欲しいのですか？もうAJAXを持ってますよ！

このチュートリアルで扱うのは技術的にはAJAXではありません。AJAXの "X" はXMLを表していますが、私がそれの代わりに使おうとしているのは JSON です。JSONは簡単で軽量ですべてのブラウザに効果的です。このTurboGearsのサンプルでJSONを使うためには、TurboGearsにそれを使いたいということを伝えてやるだけです。 pagelist のexposeデコレータの後にもう一つ加えましょう:

@expose("json")

ここで http://localhost:8080/pagelist?tg_format=json を開いてみてください。そこにはJSONフォーマットのpagelistが見えます。

標準的なCherryPyのメソッドでは、レンダリングされたページを含む文字列を返すことができます。TurboGearsでも同様のことができます。しかしあなたがこのチュートリアルでやってきたようにコードを書いたのであれば、あなたは文字列の代わりに辞書を返していますので、自由にJSONの出力を得ることができます。

チュートリアルのこのセクションでは、MochiKitを使ったJavaScriptを書いていくことにしましょう。事をシンプルにするために、 "view complete page list" のリンクを変更して、見ているページの右側に来るようにしましょう。これにはmaster.kidを変更することになります。

まず先にやる必要があるのは、すべてのページにMochiKitをincludeすることです。これはプロジェクトの設定ファイルにて、本当にすぐにできてしまいます。これはクイックスタートで生成されたパッケージ中の config/app.cfg というファイルです。これをエディタで開いて "VIEW" の設定の "tg.mochikit_all" というコメントアウトされた部分を探し出してコメントアウトをはずしてください。また同時にこの値をTrueに変更します。また最後は以下のようになるでしょう:

tg.include_widgets = ['turbogears.mochikit']

この設定はTurboGearsにすべてのページでMochiKitをincludeするように教えています。この設定を変更したら サーバを再起動してください。

次はページリストのリンクをJavaScriptの関数を引き起こすように変更します。ページリストのための空のコンテナも追加しましょう:

<p>View the <a href="#" onclick="requestPageList()">complete list of pages.</a></p>
<div id="pagelist">
</div>

これでMochiKitを使ってrequestPageListにページリストを得ることができるようになったので、スクリプトのタグをページのヘッダに定義しましょう:

&lt;disabled script type="text/javascript"&gt;
    function requestPageList() {
    var d = loadJSONDoc("${std.url('/pagelist', tg_format='json')}");
    d.addCallback(showPageList);
    }

MochiKit?はasynchronous XMLHttpRequest?を行ってJSONからの結果をJavaScriptオブジェクトに変換する関数を含んでいます。お手軽ですね！

loadJSONDocは "Deferred" オブジェクトを返します。Deferredの考え方というのは、ページリストへのリクエストが 近い将来のいつか 起こることはわかっているが、それがいつ起こるかはわからない、というものです。Deferredは結果が起きたときに何をするのかを特定することを可能にするプレースホルダーなのです。ここでとてもシンプルなことをする必要があります: 下記のような "showPageList" と呼ばれる関数を追加することです:

function showPageList(result) {
    var currentpagelist = UL(null, map(row_display, result["pages"]));
    replaceChildNodes("pagelist", currentpagelist);
}

loadJSONDocがこの結果を得ると、showPageListにそれを渡します。JavaScriptでいじったものがPythonのpagelistメソッドで返した辞書と同じになるんです！

MochiKit?.DOMは、JavaScriptの中でタグをネストすることによって新しいドキュメント要素を生成することを可能にします。pagelistページのようにUL要素を生成してみましょう。最初のパラメータは要素に対する属性のマッピングですが、今回の場合はnullになります。もう一つのパラメータはすべて子ノードになります。MochiKitのmap関数はPythonのように動作します。result["pages"]?のそれぞれの要素に対してrow_displayという関数を呼ぶようにします。最後の部分は<div>のコンテンツを、生成したDOM要素を含むpagelistのidで置換します。

row_display関数を作ってスクリプトタグを閉じましょう:

function row_display(pagename) {
    return LI(null, A({"href" : "${std.url('/')}" + pagename}, pagename))
}
&lt;disabled /script&gt;

ページリストから得られたそれぞれのpagenameはrow_displayに渡されます。属性を持たないLI要素と、href属性を持つA要素を生成しました。またA要素はコンテンツとしてpagenameを持っています。

さぁ、これで front page に行ってページリストのリンクをクリックすれば、右側にページリストが見えるでしょう。

最終的なファイル

このデモの最終的なファイルは この添付ファイル です。ただしデータベースファイルを参照できるようにdev.cfgを編集する必要があります。

もっと読む

もしあなたがこのチュートリアルで何らかの問題に遭遇したり、改善した方がよいアイデアを持っていたりしたら、メーリングリストやコメントにてお知らせ下さい。ドキュメントのパッチは歓迎します。

さらに詳しいドキュメントについては ドキュメントページ を参照してください。

Previous Page