Ajaxで受け取ったJSONを表示するために、簡単テンプレートプラグインの書き方。

jQueryプラグインを書く

プラグインを記述

$.fn.jsonAllocator = function(json){
    for(name in json) {
        this.find('[data-name="' + name + '"]').html(json[name]);
    }
}

これだけ。

使い方

JSONデータの例

次のようなJSONデータを受け取り、title と author の内容をHTML中に表示したいとする。

受け取るJSON

{
    "title":"SLAM DUNK",
    "author":"井上雄彦"
}

HTMLに`data-name`属性を記述

HTML側ではデータを表示したい要素にdata-name属性を記述し、JSONデータのキー名を指定する。

HTML

<section id="disp-section">
    <h1 data-name="title">タイトル</h1>
    <p data-name="author">作者名</p>
</section>

ちなみに、data-*** はHTML5のカスタムデータ属性なので、data-nameという属性名が何かと被って使えない時は好きな名前に変えてOK。
要素の中は空でもいいんだけど、デザイナーが作業する時に確認しやすいので、ウチではテキストを入れておく事が多い。

Ajaxを実行

使用時


// Ajax で受け取ったJSONを、#disp-section の内部で表示
$.ajax(option).
done(function(json, status, jqXHR) {
    $('#disp-section').jsonAllocator(json);
}).
fail(function(jqXHR, status) {
    ....
});

これで、AjaxでJSONを受け取ると、#disp-section要素の表示を書き換えてくれる。

もうちょっと便利に

実際には form と合わせて使うことが多いので、<input name="title"> にも対応できるように書いている。

inputにも対応版

$.fn.jsonAllocator = function(json){
    for(name in json) {
        this.find('[data-name="' + name + '"]').html(json[name]);

        // input にも対応
        var selector = 'input[type!="radio"][name="' + name + '"]input[type!="checkbox"][name="' + name + '"]';
        this.find(selector).val(json[name]);
    }
}

こうしておくと、 data-name="title" だけでなく、<input name="title">もJSONの内容で置き換えてくれる。
ラジオボタンとチェックボックスはvalue値を書き換えてしまうとマズいので省いている。

ここに、ラジオボタンなどの選択式要素にも対応したり、href や src などの属性値の書き換えにも対応できるようにしたりと、お好みで拡張して使うのが吉。

実際に、この方法で表示しているサイト

拙作のサイトでもこの手法を使っております。
よろしければチェックしてみてください。

「超波動式マンガ紹介所」
http://bm.tashinoso.xyz/
その人の「好み」に合わせた、面白マンガを紹介するサービスです。

5行で書ける、jQueryを使ったJSONテンプレートプラグイン