<div id='language'> <div class='item'> <span class='name'>language's name</span> </div> </div>
といったテンプレートを用意しておいて、javascript で操作できる jquery plugin。
Chain.js is a jQuery plugin to bind javascript data to html and generate content using the data. It provides automatic data management and content generation. please see wiki for more information.
chain.js
- 訳 -
Chain.js は javascript のデータを html にバインドしてコンテンツを生成する jQuery の plugin です。データ管理とコンテンツ生成を勝手にやってくれます。詳しくは wiki を見てね。
wiki にあるサンプルを一通り読むと、何ができるのか大体わかる。上記のテンプレートに対して
$('#language').items([ {name : 'javascript'}, {name : 'ruby'}, {name : 'perl'}, {name : 'python'}, {name : 'java'} ]).chain();
とすると、画面上には
javascript ruby perl python java
と表示される。HTMLソースは以下のように展開される。
<div class="chain-element" id="language"> <div class="item chain-item chain-element"> <span class="name">javascript</span> </div> <div class="item chain-item chain-element"> <span class="name">ruby</span> </div> <div class="item chain-item chain-element"> <span class="name">perl</span> </div> <div class="item chain-item chain-element"> <span class="name">python</span> </div> <div class="item chain-item chain-element"> <span class="name">java</span> </div> </div>
chaing.js が与えられた data を元に html を生成して表示してくれる。追加したい場合は同じように items メソッドを呼び出す。
$('#language').items([ {name : 'c'}, {name : 'c++'}, ]);
chain() は一度呼び出せばいいっぽい(付けても更新されるが違いは分かってない)。実行後、画面には
javascript ruby perl python java c c++
と追加して表示される。先頭に追加したい場合は 'shift' を使用する。
$('#language').items('merge' , 'shift' , [ {name : 'c#'}, {name : 'php'} ]);
'merge' は 'shift' が無い場合に省略可能。追加要素が一つの場合は 'add' が使える。実行後、先頭に追加される。
php c# javascript ruby perl python java c c++
追加ではなく変更したい場合は 'replace' を使用する。
function replace_lang() { $('#language').items('replace' , [ {name : 'gauche'}, {name : 'lisp'} ]); }
並び替える場合は 'sort' を使用する。
function sort_lang() { $('#language').items('sort' , 'name'); }
絞り込みたい場合は 'filter' を使用する。
function filter_lang() { $('#language').items('filter' , 'c' , 'name'); }
削除したい場合は 'empty' を使用する。
$('#language').items('empty');
HTML ソースは以下のように元に戻る。
<div id='language'> <div class='item'> <span class='name'>language's name</span> </div> </div>
複数ではなく、一つの要素を更新する場合は item を使用する(複数は items)。
<div id='date'> <span class='value'>date</span> </div>
複数との違いは、繰り返しを表す div 要素が無くなっているところ。複数の場合と同様に要素を変更できるが、複数項目ではないので引数は配列ではない。
$('#date').item({ value : '2010.10.24' }).chain();
複数項目ではないので、追加(add) できない。
などなど。jQuery 始まってた(遅い)。