RequireJSにてBackbone.jsとMustache.jsを読み込む
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 の誤りでした。指摘ありがとうございました、修正しました。