Backboneを使ってると、underscoreのテンプレートを外部ファイル化したいと思う時があります。 html内に書いてると、ファイル容量も増えるし、見た目もあれだし。。使わない可能性もあるし、、ということで、JSTテンプレートと呼ばれるものを使ってみようと思いました。また、同時にbowerでjsライブラリを読み込み、gruntでJSTテンプレートへコンパイルするなどしてみました。

npm パッケージインストール

$ npm install -g grunt-cli
$ npm install bower grunt-contrib-js

javascript モジュールインストール

$ vim bower.json
{
    "name": "sample",
    "version": "0.0.0",
    "dependencies": {
        "jquery": "~2.0.0",
        "underscore": "latest",
        "backbone": "latest"
    }
}

$ ./node_modules/.bin/bower install

これで、以下をhtmlに書く事で、jquery等が使えるようになります。

<script src='/src/javascripts/vender/jquery/jquery.min.js'></script>
<script src='/src/javascripts/vender/underscore/underscore-min.js'></script>
<script src='/src/javascripts/vender/backbone/backbone-min.js'></script>

grunt 実行準備

$ vim package.json
{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-jst": "~0.5.1"
  }
}

jstコンパイル設定

$ vim Gruntfile.js
module.exports = function(grunt) {

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    jst: {
      compile: {
        options: {
          templateSettings: {
            interpolate : /\{\{(.+?)\}\}/g
          },
          processName: function(filename) {
            return filename.replace(/(src\/templates\/|.html)/g, '');
          }
        },
        files: {
          'src/javascripts/templates/templates.js': [
            'src/templates/**/*.html'
          ]
        }
      }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-jst');
}

src/templates以下に作成したhtmlテンプレートを src/javascripts/templates/templates.jsとしてコンパイルすると設定完了。あとは、htmlテンプレートを準備して、コンパイルを実行するだけ

JSTテンプレートとして使いたい、HTMLテンプレートを準備する

$ cat src/templates/test.html
<h1>JSTを使ってみた</h1>
<p>やぁ <%- name %>さん</p>

grunt実行

$ grunt jst

コンパイル後のファイル

$ cat src/javascripts/templates/templates.js

this["JST"] = this["JST"] || {};

this["JST"]["test"] = function(obj) {
obj || (obj = {});
var __t, __p = '', __e = _.escape;
with (obj) {
__p += '<h1>JSTを使ってみた</h1>\n<p>やぁ ' +
__e( name ) +
'</p>';

}
return __p
};

こんな感じになるのか、まぁこれで src/javascripts/templates/templates.jsが作成されますので、htmlで読み込む設定を書くと使えるようになります。

JSTテンプレートを使う

準備しただけでは、まだ使えないので Backbone,Underscoreで、JSTテンプレートを使う記述をします。

$ cat src/javascripts/test.js

var helloView = Backbone.View.extend({

  template: JST['test'],

  //JST template test
  render: function() {
    //templateに渡した、nameの値が、先ほどのテンプレート内の<%- name %>に展開されます。
    $('body').html(this.template({name: 'shinofara'}));
  }

});

サンプルHTML準備

$ cat index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/bass.css" />
</head>
<body>
  テストだよ
  <script src='/src/javascripts/vender/jquery/jquery.min.js'></script>
  <script src='/src/javascripts/vender/underscore/underscore-min.js'></script>
  <script src='/src/javascripts/vender/backbone/backbone-min.js'></script>
  <script src='/src/javascripts/templates/templates.js'></script>
  <script src='/src/javascripts/test.js'></script>
  <script>
    $(function() {
      var hellow = new helloView();
      hellow.render();
    });
  </script>
</body>
</html>

ブラウザで確認

http://localhost すると、テストだよが表示された後、JSTテンプレートに書いた内容に置き換わるはず

Technofara

Golangエンジニア！仕事で必要になって勉強した事とか、新しい事とか色々まとめたりを緩くやります。技術系と思考系だけにしておきます、

BackboneJSで使うテンプレートをJSTテンプレート化して、外部管理してみた。Grunt + Bowerも使ってるよ