Symfoware

Symfowareについての考察blog

Cordova(コルドバ)チュートリアル9 ビューの作成

Cordova(コルドバ)チュートリアル8 ハンドルバーテンプレートの使用
こちらの続きです。

テンプレートを使用して画面を描画するよう変更しました。

次のステップに進みます。
Module 9: Creating Views



Module 9: Creating Views



前のステップでは、処理を全てapp.jsに記載していました。
このやり方はすぐに破綻するのが目に見えているので、処理を切り出す方法の解説です。



Step 1: Create the Home View



1. jsフォルダに「HomeView.js」というファイルを作成。
以下のコンストラクタを定義します。


  1. var HomeView = function (service) {
  2. }





2. ホームビューは、検索が実行されると下に従業員のリストを表示します。
ホームビューに重教員リスト表示用のビューを内包するよう定義してみます。


  1. var HomeView = function (service) {
  2.     var employeeListView;
  3. }





3. コンストラクタ内に、initialize関数を定義します。

・ビューのDIVラッパーを定義します。 DIVラッパーはビュー関連のイベントを取り付けるために使用されます。

・内包している従業員リスト表示用ビューを定義します。

・最後に、HomeViewコンストラクタ関数内のinitialize()関数を呼び出します。


  1. var HomeView = function (service) {
  2.     var employeeListView;
  3.     this.initialize = function () {
  4.         // Define a div wrapper for the view (used to attach events)
  5.         this.$el = $('<div/>');
  6.         this.$el.on('keyup', '.search-key', this.findByName);
  7.         employeeListView = new EmployeeListView();
  8.         this.render();
  9.     };
  10.     this.initialize();
  11. }





4. HomeViewクラスにapp.jsからrenderHomeView()関数を移動します。
ビューの再利用可能なを維持するには、divのラッパー(this.el)の代わりに、文書本体にHTMLを添付します。


  1. this.render = function() {
  2.     this.$el.html(this.template());
  3.     $('.content', this.$el).html(employeeListView.$el);
  4.     return this;
  5. };






5. findByName()も、app.jsからHomeViewクラスに移動します。


  1. this.findByName = function() {
  2.     service.findByName($('.search-key').val()).done(function(employees) {
  3.         employeeListView.setEmployees(employees);
  4.     });
  5. };






ここまでで、HomeView.jsは以下のようになりました。


  1. var HomeView = function (service) {
  2.     var employeeListView;
  3.     
  4.     this.render = function() {
  5.         this.$el.html(this.template());
  6.         $('.content', this.$el).html(employeeListView.$el);
  7.         return this;
  8.     };
  9.     
  10.     this.findByName = function() {
  11.         service.findByName($('.search-key').val()).done(function(employees) {
  12.             employeeListView.setEmployees(employees);
  13.         });
  14.     };
  15.     this.initialize = function () {
  16.         // Define a div wrapper for the view (used to attach events)
  17.         this.$el = $('<div/>');
  18.         this.$el.on('keyup', '.search-key', this.findByName);
  19.         employeeListView = new EmployeeListView();
  20.         this.render();
  21.     };
  22.     this.initialize();
  23. }








Step 2: Create the EmployeeList View



1. jsディレクトリに「EmployeeListView.js」を作成します。

2. ビューの定義を記載します。


  1. var EmployeeListView = function () {
  2.     var employees;
  3.     this.initialize = function() {
  4.         this.$el = $('<div/>');
  5.         this.render();
  6.     };
  7.     this.setEmployees = function(list) {
  8.         employees = list;
  9.         this.render();
  10.     }
  11.     this.render = function() {
  12.         this.$el.html(this.template(employees));
  13.         return this;
  14.     };
  15.     this.initialize();
  16. }







Step 3: Using the Home View



1. index.htmlに作成したjsファイルを読み込む処理を追記します。


  1. <script src="js/EmployeeListView.js"></script>
  2. <script src="js/HomeView.js"></script>





2. app.jsからrenderHomeView()関数を削除します。

3. app.jsからfindByName()関数を削除します。


4. テンプレート読み込み処理を変更します。


  1. HomeView.prototype.template = Handlebars.compile($("#home-tpl").html());
  2. EmployeeListView.prototype.template =
  3.             Handlebars.compile($("#employee-list-tpl").html());





index.htmlは以下のようになりました。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  6.     
  7.     <link href="assets/ratchet/css/ratchet.css" rel="stylesheet">
  8.     <link href="assets/css/styles.css" rel="stylesheet">
  9. </head>
  10. <body>
  11. <script id="home-tpl" type="text/template">
  12.     <header class="bar bar-nav">
  13.         <h1 class="title">Directory</h1>
  14.     </header>
  15.     <div class="bar bar-standard bar-header-secondary">
  16.         <input class='search-key' type="search"/>
  17.     </div>
  18.     <div class="content"></div>
  19. </script>
  20. <script id="employee-list-tpl" type="text/template">
  21.     <ul class="table-view">
  22.         {{#each this}}
  23.         <li class="table-view-cell media">
  24.          <a href="#employees/{{ id }}">
  25.              <img class="media-object pull-left" src="assets/pics/{{pic}}">
  26.              <div class="media-body">
  27.                  {{firstName}} {{lastName}}
  28.                  <p>{{title}}</p>
  29.              </div>
  30.          </a>
  31.         </li>
  32.         {{/each}}
  33.     </ul>
  34. </script>
  35. <script src="cordova.js"></script>
  36. <script src="lib/fastclick.js"></script>
  37. <script src="lib/jquery.js"></script>
  38. <script src="js/services/memory/EmployeeService.js"></script>
  39. <script src="lib/handlebars.js"></script>
  40. <!-- 1. 作成したビューの読み込み -->
  41. <script src="js/EmployeeListView.js"></script>
  42. <script src="js/HomeView.js"></script>
  43. <script src="js/app.js"></script>
  44. </body>
  45. </html>





app.jsはこんなかんじです。


  1. // We use an "Immediate Function" to initialize the application to avoid leaving anything behind in the global scope
  2. (function () {
  3.     /* ---------------------------------- Local Variables ---------------------------------- */
  4.     
  5.     /* 4. 読み込み方法の変更
  6.     var homeTpl = Handlebars.compile($("#home-tpl").html());
  7.     var employeeListTpl = Handlebars.compile($("#employee-list-tpl").html());
  8.     */
  9.     HomeView.prototype.template = Handlebars.compile($("#home-tpl").html());
  10.     EmployeeListView.prototype.template =
  11.                 Handlebars.compile($("#employee-list-tpl").html());
  12.     
  13.     var service = new EmployeeService();
  14.     service.initialize().done(function () {
  15.         console.log("Service initialized");
  16.         // 5. 画面描画の初期化方法変更
  17.         //renderHomeView();
  18.         $('body').html(new HomeView(service).render().$el);
  19.     });
  20.     /* --------------------------------- Event Registration -------------------------------- */
  21.     // windows.alertを上書きする
  22.     document.addEventListener('deviceready', function () {
  23.      if (navigator.notification) { // Override default HTML alert with native dialog
  24.          window.alert = function (message) {
  25.              navigator.notification.alert(
  26.                  message,    // message
  27.                  null,     // callback
  28.                  "Workshop", // title
  29.                  'OK'        // buttonName
  30.              );
  31.          };
  32.      }
  33.     
  34.      // iOS 7 ステータスバー対応
  35.      StatusBar.overlaysWebView( false );
  36.      StatusBar.backgroundColorByHexString('#ffffff');
  37.      StatusBar.styleDefault();
  38.     
  39.     }, false);
  40.     
  41.     // ダイアログ表示遅延対策
  42.     FastClick.attach(document.body);
  43.     /* ---------------------------------- Local Functions ---------------------------------- */
  44.     /* 2,3 削除
  45.     function findByName() {
  46.         service.findByName($('.search-key').val()).done(function (employees) {
  47.             $('.content').html(employeeListTpl(employees));
  48.         });
  49.     }
  50.     
  51.     // body内部を作成する関数を定義
  52.     function renderHomeView() {
  53.         $('body').html(homeTpl());
  54.         $('.search-key').on('keyup', findByName);
  55.     }
  56.     */
  57. }());





削除部分をコメントで残しているので冗長ですが、ビューに関連した情報が
スッキリしました。


もちろん、動作は修正前と同様です。

564_01.png


関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2015/02/22(日) 17:49:44|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Cordova(コルドバ)チュートリアル10 ビューの制御 | ホーム | Cordova(コルドバ)チュートリアル8 ハンドルバーテンプレートの使用>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1647-4a5c51aa
この記事にトラックバックする(FC2ブログユーザー)