街角のリブロガー: jquery mobile + backbone サンプル（２）

2012年9月14日金曜日

jquery mobile + backbone サンプル（２）

前回の続き。

今回はViewにイベントを追加してみる。

一応Viewのおさらいをしておくと、View=画面になる。
画面にはボタンなどが配置されていて、マウスやタッチパネルで操作ができ、ユーザからイベント発行される。
今回はそのボタンとイベントを作成してみようと思う。

<!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>sample2</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">
        <button id="btn_push">Push</button>
        <h3><%= part1 %>, <%= part2 %>!</h3>
        <h3>counter <%= counter %></h3>
        </script>
    <!-- underscore template end -->

    <!-- backbone start -->
        <script>
        (function($){
                MyView = Backbone.View.extend({
            el: '#myview'
            ,initialize: function(){
                this.counter = 0;
                this.render();
            }
            ,render: function(){
                var data = { part1: 'hello', part2: 'backbone!', counter: this.counter }
                var tmpl = _.template($("#hello-template").html(), data);
                this.$el.html(tmpl);
                this.$el.trigger('create');
            }
            ,events: {
                'click button#btn_push': 'evt_push'
                    }
            ,evt_push: function(){
                this.counter++;
                this.render();
            }
            });
            var myview = new MyView();
        })(jQuery);


    </script>
    <!-- backbone end -->
    </body>
</html>

前回のソースから、テンプレートにボタンを配置して、ボタンが押されたらカウンターが＋１されるようにした。
　ボタンID = btn_push　　
　イベントID＝evt_push

１つ注意しておいてほしいのが、render内にタグを書き換えた後にtriggerでcreateしている所。
これを行わないとjquery mobileのボタン装飾などがされなくなるので入れておく必要がある。