chain.js - Data Binding Plugin for jQuery

<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 は javascript のデータを html にバインドしてコンテンツを生成する jQuery の plugin です。データ管理とコンテンツ生成を勝手にやってくれます。詳しくは wiki を見てね。

chain.js

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 始まってた(遅い)。