jQuery templeateでhtmlとjava scriptを分離する

Pocket
[`evernote` not found]

先日書いたの記事の続きというか、もう少しだけ解説を。

jsonファイルから動的にリストを生成する部分です。
これは、jquery templateというライブラリを使ってリストを作っています。
このライブラリを使うと、java scriptのコードとhtmlのコードを分離して扱うことができるようになります。

ライブラリを読み込んで、下記のようなコードで実現可能です。

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
//jsonを読み込む。ajaxがイミフなのでコード内に書きましたけどなにか?
var jsonAray = list;
var spotList = $( '#spotListTmpl').tmpl( jsonAray );
$('#spotList').append( spotList );
$('#spotList').listview('refresh');
<!-- ここに生成されたhtml要素が挿入されます -->
<ul data-role="listview" data-inset="true" id="spotList">
</ul>

<!-- htmlの構造を定義 -->
<script id="spotListTmpl" type="text/x-jquery-tmpl">
<li><a href="${url}">${title}</a></li>
</script>

直感的でわかりやすいんじゃないかと思うのですが、どうでしょうか。

この部分で、htmlタグと動的に読み込む要素(jsonとかxmlとか)を使って構造を作って
指定した場所に放り込んであげるわけですね。
java scriptでhtml要素を生成する際、改行が出来なかったりする関係でどうしても可読性が落ちてしまいがちです。
さらに変数とかを入れたりすると悲惨ですよね。

"<li><a href='" + url + "'>" + title + "</a></li>"

通常の書き方だとこんな感じ?この程度ならなんとかなりますが、もう少し複雑になるとお手上げですorz

jquery templateは、jsonとか、xmlを扱える方であれば、比較的簡単に導入できるテクニックじゃないかと思います。

ちなみに、本来はappendするコードを放り込ませる要素よりも下に書かなければなりません。
が、どうもうまく動いちゃってますね。なんでだろ?

最後に重要なこと。
jquery mobileでは、最初の読み込み時にhtml要素に対してスタイルを適用させます。
つまり、後から読み込んだ要素にはjquery mobileのスタイルが適用されません。
動的に生成したli要素に対しては、

$('#spotList').listview('refresh');

という様に、再読み込みをさせてスタイルを提要させる必要があります。

jquety mobileとjquery template2つのライブラリを使ったデモでしたので、ちょっと分かりにくくなってしまいましたがどちらも扱えるようになると表現の幅が広がると思うのでマスターしたいですね。
・・・jquety mobileはちょっと扱いにくいですが。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。