RequireJSにてBackbone.jsとMustache.jsを読み込む

JavaScript

RequireJS の2.0 から導入された shim を利用して簡単に読み込めたのでメモ。

最初にまとめを書く

  • RequireJS で読み込めた
  • html ファイルで script が一つで済むので嬉しい。

ディレクトリ構成

$ tree
.
├── index.html
├── js
│   ├── libs
│   │   ├── backbone-min.js
│   │   ├── mustache.js
│   │   ├── require.js
│   │   ├── underscore-min.js
│   │   └── zepto.min.js
│   └── main.js
└── style.css

今回は簡単に js/libs に必要なライブラリを入れた。

それぞれファイル名がライブラリ名になっているので、この記事を参照にする際はダウンロードして配置すること。

main.js

ライブラリ読み込み部抜粋は以下。

Zepto.js、Backbone.js、Mustache.jsがそれぞれRequireJSのAMDに則していないみたいなので設定した。詳しくはこのページ下部の参考 2 を参照すること。

require.config({                                                                                                                                  
  shim: {
    'zepto': {
      exports: '$' 
    },  
    'backbone': {
      deps: ['underscore', 'zepto'],
      exports: 'Backbone'
    },  
    'mustache': {
      exports: 'Mustache'
    }   
  },  
  paths: {
    backbone: 'libs/backbone-min',
    zepto: 'libs/zepto.min',
    underscore: 'libs/underscore-min',
    mustache: 'libs/mustache'
  }
});

以下、 main.js の全体。主文は適当。

require.config({
  shim: {                                                                                                                                         
    'zepto': {
      exports: '$' 
    },  
    'backbone': {
      deps: ['underscore', 'zepto'],
      exports: 'Backbone'
    },  
    'mustache': {
      exports: 'Mustache'
    }   
  },  
  paths: {
    backbone: 'libs/backbone-min',
    zepto: 'libs/zepto.min',
    underscore: 'libs/underscore-min',
    mustache: 'libs/mustache'
  }
});

require(['backbone', 'mustache'], function(Backbone, Mustache) {
  var TestView = Backbone.View.extend({
    el: $('<div>'),
    initialize: function() {
      this.render();
    },  
    render: function() {
      var person = { 
          firstName: 'Bar',
          lastName: 'Foo',
          blogURL: 'http://example.com'
      };  
      var tmp = '<h1>{{firstName}} {{lastName}}</h1>'
      tmp += '<p>Blog: {{blogURL}}</p>';
      $(this.el).html(Mustache.to_html(tmp, person));
    }   
  }); 
  var v = new TestView();
  $('#contents').html(v.el);
});

その他のファイル

index.html

script の読み込みがひとつになるので嬉しい。

<!DOCTYPE html>
<html lang="en">                                                                                                                                  
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>hello, world.</h1>
    <div id="contents"></div>

    <!-- script include -->
    <script data-main="js/main" src="js/libs/require.js"></script>
  </body>
</html>

style.css

特にスタイルは必要無いので空。

最後にまとめを書く

  • RequireJS で読み込めた
  • html ファイルで script が一つで済むので嬉しい。

自分が作るサイトとして script タグがたくさん必要なのは避けたかったので、RequireJS を使って最初に読み込むファイルをひとつにできるのは嬉しい。

RequireJS の依存管理は詳しくは知りませんが、一度読み込んだファイルは読み込まないなど、
そこはよしなにやってくれるんだと思う。　

参考

1. Loading mustache using requirejs
2. RequireJS API - Configuration Options
3. Backbone.js入門 「Events」
4. Christophe Coenraets - Tutorial: HTML Templates with Mustache.js
5. sitepoint - A Minimal HTML Document (HTML5 Edition)

追記

当初は「RequireJS の2.1 から導入された」と記載されていましたが、
2.0 の誤りでした。指摘ありがとうございました、修正しました。