Underscore.js の template を使ってドリルダウンを実装するスニペット

公開日: : JavaScript , ,

先日、Underscore.js の template と each を使って JSON から select タグを生成する という記事を投稿しましたが、今回も Underscore.js を使った select タグの生成に関する内容です。

今回は、ドリルダウンを実装する考え方というか、スニペット的なものをメモしておきます。
何度もドリルダウンは実装しているのですが、毎回「面倒くさいなぁ」と思いながらコードを書いているので効率を上げるためにメモすることにしました。

icatch-drill_mini

photo credit: mr.beaver via photopin cc

目次

1. 使用したライブラリ

使用したライブラリと、そのバージョンは次の通りです。

1-1. jQuery

今回のサンプルに jQuery は必須ではないのですが、この書き方で慣れてしまっているので使いました。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

1-2. Underscore.js

Underscore.js の template メソッドを使ってタグを生成します。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

2. ソースコード

以下は、作成したソースコードについてになります。

2-1. ファイル構成

作成したファイルは次の3本です。

  • index.html
  • js/child_json.js
  • js/parent_json.js
  • js/script.js
$ ls -R
.:
index.html  js

./js:
child_json.js  parent_json.js  script.js

2-2. index.html

まずは index.html です。

ここには参照する JavaScript の参照定義と、option タグが設定されていない空の select タグが2つ定義されています。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset=utf8>
        <title></title>
    </head>
    <body>
        <div>
            親プルダウン:<select class="parent"></select>
        </div>

        <div>
            子プルダウン:<select class="child"></select>
        </div>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
        <script type="text/javascript" src="./js/parent_json.js" charset="utf8"></script>
        <script type="text/javascript" src="./js/child_json.js" charset="utf8"></script>
        <script type="text/javascript" src="./js/script.js" charset="utf8"></script>
    </body>
</html>

ドリルダウンのサンプルなので select タグは「親」と「子」としています。

2-3. js/parent_json.js

このファイルは「親」の select タグに設定する内容を定義した JSON です。

var parent = [
    {"code": 0, "name": "すべて"},
    {"code": 1, "name": "親1"},
    {"code": 2, "name": "親A"},
    {"code": 3, "name": "親a"},
]

“code” は option タグの value 属性に設定します。
また、”name” を画面に表示します。

2-4. js/child_json.js

このファイルは「子」の select タグに設定する内容を定義した JSON です。

var children = [
    {"parent_code": 1, "code": 11, "name": "子1-1"},
    {"parent_code": 1, "code": 12, "name": "子1-2"},
    {"parent_code": 1, "code": 13, "name": "子1-3"},

    {"parent_code": 2, "code": 21, "name": "子A-1"},
    {"parent_code": 2, "code": 22, "name": "子A-2"},
    {"parent_code": 2, "code": 23, "name": "子A-3"},
    
    {"parent_code": 3, "code": 31, "name": "子a-1"},
    {"parent_code": 3, "code": 32, "name": "子a-2"},
    {"parent_code": 3, "code": 33, "name": "子a-3"}
]

“parent_code” と parent_json.js の “code” が関連を表しています。

「親」select タグで “code” が 1 の option が選択されたら、「子」select タグに “code” が 11,12,13 の項目が設定される、という感じになっています。

2-5. js/script.js

このファイルでドリルダウンを実装しています。

処理の流れを簡単に説明しますと、次のようになります。

  1. 「親」select タグを取得し、option タグを追加
  2. 「子」select タグを取得し、option タグを追加(すべての項目を追加)
  3. 「親」select タグが変更されたら、選択された値を取得し
    • 値が 0 よりも大きければ、
      • 該当する “parent_code” の項目を取得して
      • 「子」select タグに設定する
    • それ以外ならば
      • 「子」select タグの項目を初期化する
$(function() {
    var parentPulldown = $('.parent');
    resetOptions(parentPulldown, parent);
    var childPulldown = $('.child');
    resetOptions(childPulldown, children);

    parentPulldown.change(function() {
        parentPulldown.find("option:selected").each(function () {
            var code = Number($(this).val());

            if(0 < code) {
                var x = _.where(children, {"parent_code": code});
                resetOptions(childPulldown, x);
            } else {
                resetOptions(childPulldown, children);
            }
        });
    })
});

function resetOptions(select, elements) {
    select.children('option').remove();

    _.each(elements, function(element) {
        var template = _.template('<option value="<%= code %>"><%= name %></option>');
        var tag = template({name: element.name, code: element.code});
        select.append(tag);
    });

}

3. サンプル

このサンプルプログラムは、次の場所に公開してあります。

4. まとめ

このプログラムには1つ改善すべき点があります。

それは、children から該当するオブジェクトを検索する部分です。
_.where を使ってるところがそれです。

この程度の個数なら問題無いと思いますが、もっと大量の項目を扱う場合は工夫が必要になってきます。

今回の例だと “parent_code” ごとに Hash にまとめるとかして、検索する範囲を狭める対策を行います。

5. プログラムを Github に登録しました

今回の記事で使用したサンプルプログラムを Github に登録しました。

よかったら参考にしてみてください。

6. その他の JavaScript に関する記事

その他の JavaScript に関する記事は次の通りです。
気になる記事があったらぜひチェックしてみてください!

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-switch_mini

jQuery を使って表示する画像を setInterval を使って切り替える

画面に表示する画像を一定期間で切り替えるスニペットです。 スライドショー的なプラグインで済ますこと

記事を読む

Head in Hands

JSON をオブジェクトに変換するときに注意したいこと

おそらくですが、これから書く内容は常識なんだと思います。 が、その常識を知らなかったためにかなりの

記事を読む

icatch-load_6161289029_mini-thumbnail

Grunt の grunt-contrib-watch を使うと CPU 使用率が上がるので spawn: false を試してみた結果

grunt-contrib-watch を使うことで、ユニットテストを実行したり、サイトをリロードし

記事を読む

icatch-browser_3376956889_mini-thumbnail

GoogleMap サンプルのプロジェクトに Grunt の LiveReload を有効にする設定を追加しました

ウチのブログで公開している GoogleMaps API を使った GoogleMap のサンプルプ

記事を読む

icatch-checklist_4439276478_mini-thumbnail

BootstrapValidator の基本的なバリデーションを試すサンプルを作成しました

TwitterBootstrap3 用のバリデーションチェックプラグイン BootstrapVali

記事を読む

icatch-mist_mini

jQuery を使ってページの opacity を徐々に上げて fadeIn して見せる

仕事で HTML を使ってコンテンツをいくつか作成しました。 その際に他でも使い回しが効くスニペット

記事を読む

icatch-googlemap_3384995399_mini-thumbnail

GoogleMap を使って住所から緯度・経度を計算する

先日も GoogleMpa のジオコーディングを使った地図を表示するメモをアップしましたが、今回も

記事を読む

icatch-format_mini-thumbnail

JavaScriptなどをフォーマットするGruntプラグイン grunt-jsbeautifier を使ってみる

Java を使ってプログラムを書いているときはソースコードをフォーマットするのに、JavaScrip

記事を読む

icatch-checkbox-147904_640

jQuery を使ってチェックボックスのチェックを付けたり外したりするコードスニペット

jQuery を使ってチェックボックスの ON/OFF を操作する方法ですが、以前実装したときのコー

記事を読む

icatch-disappear_7186028511_mini-thumbnail

GoogleMapsAPIを使ってMarkerの表示と非表示を切り替える方法

GoogleMaps API(v3) を使って地図上に表示されている Marker を非表示にする方

記事を読む

Googleアドセンス用(PC)

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


六 × 5 =

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑