- jquery mobileをそのまま使ってみると、ページ遷移やajax周りで泣く。（過去記事参照）
- なんとか普通に動くようになったからコード整理しようと思いテンプレートエンジンの導入を考える。
- angularJSを使ってみるとjqmと相性が悪くて使えない。angularJS-jquery-adapterなるものを使ってみる。
- イベント周りとかテンプレートが強力でほんとjqmバイパス感が強いけど使えるんだけど、adapter側の情報が少ないし、画面遷移周りでフリーズすることもあり次を探しに出る。
- クライアントサイド側のMVCフレームワークで一番情報が豊富と書かれていたbackbone.jsに手を出してみる。←今ココ！
というわけで行き着いた先はbackbone.jsであった。
チュートリアルを見てもちんぷんかんぷんで、なんじゃこりゃー！と思いつつ１つ１つ解いていくことにする。
Backbone.JSって何？
Javascriptで書かれているMVCフレームワークである。
フレームワークの構成はRouter、Model、Collect、Viewの４構成で出来ている。
各々の説明すると、
・ページ単位で切り分けるRouter、
・データ定義するModel 、
・複数のデータを管理するCollect、
・画面周りを担当するView
という感じになる。
次にフレームワークの基本的な流れ。
ページアクセス
↓
Routerで振り分け
↓
Viewでページ作成
↓
Collect、Model必要なデータを引っ張ってくる。
↓
画面表示
MVCフレームワークを使った事がある人であれば馴染みやすいと思う。
またこの他に、
HTMLを吐き出すテンプレート「underscore」
画面のデコレーション担当「jquery mobile」
があって今回のサンプルプログラムで使ったコードを張っておく。
ここまで頭の中を文章に吐き出してみた。
あとは使って覚えて知識の補強を繰り返していけば、実用投入ができるかもしれない。
ちなみに、このbackbone.jsは軽量って謳ってるけど、軽量という言葉は最近の流行なのだろうか。
体重１００ｋｇ軽量級とか軽量ってタイトルが付くと、一瞬だけ軽そうって気分になるけど。
準備するもの
jQuery mobile + backboneするのに今回は以下のライブラリを用意する。
http://jquery.com/http://documentcloud.github.com/underscore/
https://github.com/douglascrockford/JSON-js
http://backbonejs.org/
http://jquerymobile.com/
いよいよ Hello, Bavkbone! を書く
ベースのHTMLコードはjquery mobile サイトのデザイナツールで作りました。
それに加えてbackboneのViewとunderscoreを今回使用してます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>example</title>
<link rel="stylesheet" href="./jquery.mobile-1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="my.css" />
<style>
</style>
<script src="underscore.js"></script>
<script src="json2.js"></script>
<script src="jquery-1.7.1.min.js"></script>
<script src="backbone-min.js"></script>
<script src="./jquery.mobile-1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="my.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header"><h3>sample1</h3></div>
<div data-role="content" style="padding: 15px">
<!-- content start -->
<div id="myview"></div>
<!-- content end -->
</div>
<div data-theme="a" data-role="footer" data-position="fixed"><h3></h3></div>
</div>
<!-- underscore template start -->
<script type="text/template" id="hello-template">
<h3><%= part1 %>, <%= part2 %>!</h3>
</script>
<!-- underscore template end -->
<!-- backbone start -->
<script>
MyView = Backbone.View.extend({
el: '#myview'
,initialize: function(){
this.render();
}
,render: function(){
var data = { part1: 'hello', part2: 'backbone!' }
var tmpl = _.template($("#hello-template").html(), data);
this.$el.html(tmpl);
}
});
var myview = new MyView();
<!-- backbone end -->
</script>
</body>
</html>
簡単に解説
タグで囲った部分が3ブロック構成、コンテンツ、テンプレート、backboneで出来てます。 上から、
１．コンテンツ部分。
動的にしたい部分divタグにidを付けたものを挿入します。
２．テンプレート部分。
動的に表示させるHTMLをunderscoreの記述にしたがって記述します。
３．Backbone部分
どういったデータを加工して表示させるのかを記述します。
・elが対応する１のdivタグのID
・Viewの定義、initializeと、renderを記述。
動作の説明
実行画面
できたら最後にビューのインスタンスを作成して終えてます。
これをやるとどうなるかというと、 Myviewのinitialize()が呼び出されてrender()を呼ぶ。
render()内で今回用意したデータとテンプレートを使ってHTMLを作って、 elにデータセットして終えてます。
最初に説明したフローで説明すると、
ページアクセス
↓
↓
Viewでページ作成
↓
↓
画面表示
だいぶ省略してますが、backboneのViewとテンプレートを使ったHTMLレンダリングの仕組みが見えてくると思う。
