データバインディングするjQueryプラグイン

jqueryのプラグインとして、htmlにjsonデータを突っ込めるコードを書いた。
ただし、いま流行りのリアクティブ感は一切なく、実行したタイミングでviewに反映して終わり、というすごーく限定的なシロモノとなっているので注意。

https://github.com/yosiopp/jquery-viewbinder

目的

htmlは基本的に静的で、一部APIのレスポンスjsonの内容を画面に表示したい、というシンプルな要件があり、大仰なSPAアプリにはしたくない、というときに、jQueryを使ってちゃちゃっと作りたいところだけど、とはいえDOMを自分で弄るのは面倒だし、html構造の変更にも弱くなるからなあ。htmlを弄ってもちゃんと意図したところに反映されてほしいよなー。
なんていう場合に、
Angular1のng-bindみたいにデータが特定要素に展開されてくれたら嬉しいな、という目的で作成しました。

なので、データのリアルタイム反映なんていらないのです。

やりたいことは、htmlに文字列を埋めることだけ。（なので、データバインディングという表現だと大袈裟なのかも…）

使い方

$("body").viewbinder(object);
<span data-vmap="key" data-vpath="jsonpath"></span>

データを埋めたい要素にdata-vmap, data-vpath属性を指定します。 data-vmapにはobjectのキー名を指定します。 data-vpathにはobjectルートから目的のデータまでのjsonpathを指定します。

$(()=>{
    $("body").viewbinder({
        hoge: {name:"yosiopp"},
        fuga: {name:"john"}
    });
})

<span data-vmap="hoge" data-vpath="name"></span>

上記は、以下のようにレンダリングされます。

<span>yosiopp</span>

data-vmapを省略した場合、viewbinder()に渡されたobject自身が指定されたものとみなします。なので、以下のようにも書くことができます。

<span data-vpath="$.hoge.name"></span>

data-vmapが#で始まる文字列の場合、localStorageから該当するエントリをgetItemし、JSON.parseして利用します。つまり、以下はだいたい同じです。

$(()=>{
  $("body").viewbinder();  
})
<span data-vmap="#local" data-vpath="$.items[0].name"></span>

$(()=>{
  $("body").viewbinder(JSON.parse(localStorage.getItem("local")));
})
<span data-vpath="$.items[0].name"></span>

同様に、%で始まる文字列の場合はsessionStorageのエントリから探します。

ちなみにjsonPathを利用するためには
https://code.google.com/archive/p/jsonpath/
を利用する必要があります。

自分のために作ったものですが、要件に合うようでしたらご利用ください。