Backbone.jsでプレゼンテーション

Backbone.js入門中です。 OfficialのTODOをひと通りやって自分でも何か作ってみようと思い作りました。

Backbone-slide.js

本当はサーバ上のデータを取得してそれをModelで管理してViewで表示〜みたいなアプリの方がBackbone.jsのMVフレームワークを使うメリットが発揮できるのだろうけれど、とりあえず思いついたのがDOM操作だったのでプレゼンテーションツールになりました。

html中の<section>タグを取得してModel,Collectionとして管理して、Viewでひとつづつ表示するような仕組みになってます。

使い方はcssとjsファイルをインポートして最後にBackboneSlide.init();を呼ぶだけです。 ホントはinitにオプション引数渡してアニメーションとか可変にしたいけど、そこまで作れなかったので画面遷移はfadeIn/Outだけとなってます。 また、backbone-slide.cssはプレゼンとしての表示のためだけなので、見た目のデザインは独自のcss等を読みこめば基本的には反映されます。

    <head>
                    <meta charset="UTF-8">
                    <link rel="stylesheet" href="./css/backbone-slide.css">
                    <title>Backbone-Slide.js</title>
                </head>
                <body>
                    <section><p>HelloWorld!</p></section>
                    ...
                    <script src="./javascript/lib/jquery-1.7.1.js"></script>
                    <script src="./javascript/lib/underscore.js"></script>
                    <script src="./javascript/lib/backbone-min.js"></script>
                    <script src="./javascript/backbone-slide.js"></script>
                    <script type="text/javascript">
                      $(function(){
                        BackboneSlide.init();
                      });
                    </script>
                </body>
            

backbone.jsとかunderscore.jsとかイケてるテクニックをもっと使えるようになりたいなー。 あとテストもしっかり書くようにしよう。 この本も途中までしか読んでないのでちゃんと読もう。


参考にしたサイト


あと今回は静的なファイルだけなので、初めてgithub-pagesを作ってみた。

gitの仕組みがわかっているようで全然わかってないのでこの本を注文した。

Comments

*