Underscore.js の template を使うときは HTML にテンプレートを書こう

公開日: : JavaScript , , ,

Underscore.jstemplate メソッドを使った select タグ生成についての記事を書いてありますが、template メソッドに渡す HTML のテンプレートを JavaScript に定義してある部分がイマイチです。

なので、HTML のテンプレートを HTML ファイル内に定義するサンプルとしてメモを追加することにしました。

icatch-twins_7039449789_mini

photo credit: e³°°° 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. ファイル構成

今回のサンプルは mp3 を html5 の audio タグを使って再生するものにしました。
実用性なさそうですが、個人的にちょっと必要だったので。。。

再生する mp3 を select タグから選択して自動再生させる、というものです。

使用したファイルは次のものになります。

  • index.html
  • js/mp3list.js
  • js/script.js
  • mp3/c11.mp3
  • mp3/d7.mp3
  • mp3/d8.mp3
$ ls -R
.:
index.html  js

./js:
mp3list.js  script.js

./mp3:
c11.mp3  d7.mp3  d8.mp3

2-2. index.html

まずは index.html です。

ここには参照する JavaScript の参照定義と、mp3 を再生するための audio タグ、空の option タグが1つだけ設定されている select タグが定義されています。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset=utf8>
        <title></title>
    </head>
    <body>
        <audio id="player" controls></audio><br/>
        
        <select id="list" >
            <option value="" />
        </select>

        <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/mp3list.js" charset="utf8"></script>
        <script type="text/javascript" src="./js/script.js" charset="utf8"></script>
    </body>
</html>

<script type="text/template" id="option_template">
    <option value="<%= filename %>"><%= filename %></option>
</script>

ファイルの末尾にある script タグが Underscore.js の template メソッドで使用する HTML のテンプレートになります。

内容は option タグのテンプレート定義になっています。
このテンプレートを使って select タグの option として追加していきます。

2-3. js/mp3list.js

このファイルは、再生する mp3 ファイルのパスを定義した JSON です。

本来なら mp3 のメタデータを定義すべきなのでしょうが、あんまり頑張ってもアレなので省きました。

var mp3s = [
    "./mp3/c11.mp3",
    "./mp3/d7.mp3",
    "./mp3/d8.mp3"
]

JavaScript はローカルのファイルを触れないと思っているのでこのファイルを定義していますが、もしかして触る方法があるのでしょうか。

2-4. js/script.js

この JavaScript で次の2つを実装しています。

  1. Underscore.js の template メソッドを使って option タグを追加
  2. 選択された項目の mp3 を自動再生
$(function() {
    // Underscore.js の `template` メソッドを使って option タグを追加
    var template = _.template($("#option_template").text());
    var pulldown = $('#list');
    _.each(mp3s, function(mp3) {
        var tag = template({filename: mp3});
        pulldown.append(tag);
    })

    // 選択された項目の mp3 を自動再生
    pulldown.change(function() {
        var x = pulldown.find("option:selected").text();
        $('#player').attr('src', x).attr('autoplay', 'autoplay');
    });
});

option タグのテンプレートを HTML ファイルに定義したので、この JavaScript ファイルと役割を分離することができています。

デザイナさんと一緒に仕事をすることもあるかと思います。
お互いの責任分担的なところが明確になるので、このようにしておくほうがベターです。

2-5. 音声ファイル(mp3)

再生に使用する mp3 ファイルは mp3 ディレクトリに置きます。

この mp3 ファイルは、次のサイトにあるものを拝借しました。
ありがとうございます!

3. サンプル

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

4. まとめ

HTML にテンプレートを書くのってちょっとかったるかったりするんですけど、保守のことを考えると JavaScript じゃなくて HTML にテンプレート書いたほうがいいので面倒でもそうするようにしておきます。

デザイナさんに JavaScript ファイルを触ってほしくなかったりするので。

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

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

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

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

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

Googleアドセンス用(PC)

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

関連記事

Head in Hands

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

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

記事を読む

icatch-googlemap_3384984991_mini-thumbnail

住所から GoogleMap を表示するサンプル

ここ直近の2プロジェクトで緯度・経度(もしくは住所)から GoogleMap を表示する要件がありま

記事を読む

icatch-plug_8436280178_mini-thumbnail

TwitterBootstrap3 用のバリデーションチェックプラグイン BootstrapValidator の導入から Live チェックまでを試してみた

BootstrapValidator は、TwitterBootstrap3 で構築したサイト用の

記事を読む

icatch-load_6161289029_mini-thumbnail

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

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

記事を読む

icatch-exception_2482521750_mini-thumbnail

Error オブジェクトの種類と独自例外オブジェクトの作成方法

JavaScript で例外オブジェクトを扱ったことがなかったので、簡単な内容ですが例外オブジェクト

記事を読む

icatch-mist_mini

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

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

記事を読む

icatch-browser_3376956889_mini-thumbnail

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

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

記事を読む

icatch-googlemap_4866826566_mini-thumbnail

GoogleMap の Marker に InfoWindow を設定するサンプル

GoogleMap の Marker には InfoWindow を使って付加情報を設定できます。

記事を読む

icatch-googlemap_3384995399_mini-thumbnail

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

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

記事を読む

icatch-checklist_4439276478_mini-thumbnail

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

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

記事を読む

Googleアドセンス用(PC)

Message

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


− 1 = 零

次の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 ↑