2012年9月13日木曜日

jquery mobile + backbone サンプル(1)

jquery mobileを使っていろんな情報を見て覚えて使ってみて、やっぱまともじゃない。jqmは使えない!って何度も思ったことか。ほんとWeb周りの技術ってごちゃごちゃしてて苦難の道のりである。
  • jquery mobileをそのまま使ってみると、ページ遷移やajax周りで泣く。(過去記事参照)
  • なんとか普通に動くようになったからコード整理しようと思いテンプレートエンジンの導入を考える。
  • angularJSを使ってみるとjqmと相性が悪くて使えない。angularJS-jquery-adapterなるものを使ってみる。
  • イベント周りとかテンプレートが強力でほんとjqmバイパス感が強いけど使えるんだけど、adapter側の情報が少ないし、画面遷移周りでフリーズすることもあり次を探しに出る。
  • クライアントサイド側のMVCフレームワークで一番情報が豊富と書かれていたbackbone.jsに手を出してみる。←今ココ!

というわけで行き着いた先はbackbone.jsであった。
チュートリアルを見てもちんぷんかんぷんで、なんじゃこりゃー!と思いつつ1つ1つ解いていくことにする。

Backbone.JSって何?
 Javascriptで書かれているMVCフレームワークである。
フレームワークの構成はRouter、Model、Collect、Viewの4構成で出来ている。
各々の説明すると、

 ・ページ単位で切り分けるRouter、
 ・データ定義するModel 、
 ・複数のデータを管理するCollect、
 ・画面周りを担当するView

という感じになる。


次にフレームワークの基本的な流れ。

 ページアクセス
  ↓
 Routerで振り分け
  ↓
 Viewでページ作成
  ↓
 Collect、Model必要なデータを引っ張ってくる。
  ↓
 画面表示

MVCフレームワークを使った事がある人であれば馴染みやすいと思う。

またこの他に、
 HTMLを吐き出すテンプレート「underscore」
 画面のデコレーション担当「jquery mobile」

があって今回のサンプルプログラムで使ったコードを張っておく。


ここまで頭の中を文章に吐き出してみた。
あとは使って覚えて知識の補強を繰り返していけば、実用投入ができるかもしれない。
ちなみに、このbackbone.jsは軽量って謳ってるけど、軽量という言葉は最近の流行なのだろうか。
体重100kg軽量級とか軽量ってタイトルが付くと、一瞬だけ軽そうって気分になるけど。


準備するもの

 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で出来てます。 上から、

    1.コンテンツ部分。
    動的にしたい部分divタグにidを付けたものを挿入します。
   2.テンプレート部分。
    動的に表示させるHTMLをunderscoreの記述にしたがって記述します。
   3.Backbone部分
     どういったデータを加工して表示させるのかを記述します。
     ・elが対応する1のdivタグのID
     ・Viewの定義、initializeと、renderを記述。


動作の説明





実行画面


 できたら最後にビューのインスタンスを作成して終えてます。
 これをやるとどうなるかというと、 Myviewのinitialize()が呼び出されてrender()を呼ぶ。
render()内で今回用意したデータとテンプレートを使ってHTMLを作って、 elにデータセットして終えてます。
 最初に説明したフローで説明すると、


 ページアクセス
 ↓
Routerで振り分け (スキップ)
 ↓
Viewでページ作成
 ↓
Collect、Model必要なデータを引っ張ってくる。 (スキップ)
 ↓
画面表示
だいぶ省略してますが、backboneのViewとテンプレートを使ったHTMLレンダリングの仕組みが見えてくると思う。

コメントを投稿

Androider