Recommended
More Related Content
Viewers also liked
Viewers also liked (13)
More from ksimoji
第3回Rest勉強会 marionette編
- 1. ワークショップ ■ Lesson1 エントリポイント・ルーティング・コントローラ ■ Lesson2 TODO一覧画面にMarionetteのビューを適用 ■ Lesson3 TODO詳細画面にMarionetteのビューを適用
- 2. 進め方 1. Marionetteの解説（5分） 2. 事前準備についての解説（5分） 3. 事前準備作業 4. Lesson1の解説（5分） 5. Lesson1の作業（20分） ⇢制限時間内に間に合わない場合は解答をコピペして次のLessonへ。 6. Lesson2の解説 ∼以下Lesson3まで同様∼
- 4. View周りの改善がメイン • Router, Controllerも少し改善 • 細かいのも有りますが今回はあまり触れません
- 5. View周りの改善 1. Viewの切り替えが楽 2. ネストしたViewの管理が楽 3. テンプレートの描画が楽 4. その他
- 8. // 現在のビュー currentView : null, // TODOリスト表示 showTodoLists : function() { // 表示中のビューがあれば if (this.currentView) { // 先に削除しておく this.currentView.remove(); } // 削除すると #content のエレメントも一緒に消える if (document.getElementById('#content') === null) { // ので、改めて作っておく $('#main').append('<div id="content"/>'); } // ビューを生成 this.currentView = new app.TodoCollectionView(); } ビューの切り替え（コード例） Marionetteがない時
- 10. ビューの切り替え（コード例） Marionetteがある時 showTodoLists : function() { app.application.mainRegion.show(new app.TodoCollectionView()); } 「Region（リージョン）」に嵌めこむだけ！ ※リージョンについては後ほど
- 14. // TODO１件表示関数 // 引数 : 表示するModel addOne : function(todo) { // Modelを渡してView生成 var itemView = new app.TodoItemView({ model : todo }); // renderしてHTMLエレメント取得 var html = itemView.render().el; // 親HTMLエレメントにappend $('#todo-lists').append(html); } ネストしたView - 「TODO１件View」を表示する Marionetteがない時
- 16. childView : app.TodoItemView, childViewContainer : 'tbody', ・TODO1件ビューのオブジェクト名 ・親HTMLエレメント を設定するだけ！ ネストしたView - 「TODO１件View」を表示する Marionetteがある時
- 18. 3. テンプレート の描画が楽
- 20. // テンプレートのHTMLエレメントを取得 template : _.template($( #detail-template').html()), // 描画関数 render : function() { // Modelから表示用データを取り出す var data = this.model.toJSON(); // 描画する this.$el.html(this.template(data)); }, Marionetteがない時 テンプレートの描画
- 23. 4. その他
- 24. •ui変数 • ビュー内のHTMLエレメントのセレクタの記述を一箇所に集約する。 • `@ui.∼`の形式でビュー内から参照可能となる。 •regions変数 • リージョンを簡単に定義する。 •triggers, trigger • triggerで発火したイベントをtriggersで購読して関数実行 •behaviors •共通処理をMixInする機能 •etc... その他 ui変数とregions変数は今回扱います。 その他は調べてみましょう！
- 25. 本日のワークショップ
- 26. メニュー ■ gitのブランチを整える ■ Marionetteライブラリダウンロード ■ Lesson1 エントリポイント・ルーティング・コントローラ ■ Lesson2 TODO一覧画面にMarionetteのビューを適用 ■ Lesson3 TODO詳細画面にMarionetteのビューを適用
- 27. gitのブランチ を整える メニュー ■ gitのブランチを整える ■ Marionetteライブラリダウンロード ■ Lesson1 エントリポイント・ルーティング・コントローラ ■ Lesson2 TODO一覧画面にMarionetteのビューを適用 ■ Lesson3 TODO詳細画面にMarionetteのビューを適用
- 34. gitのブランチを整える git remote add upstream https://github.com/suzukishouten- study/rest-study.git 鈴木商店GitHubをリモートリポジトリとして追加する コマンド （実際は一行です） 鈴木商店GitHub https://github.com/suzukishouten-study/rest-study.git を、リモートリポジトリ名 「upstream」 として登録する作業です。
- 40. gitのブランチを整える git checkout master コマンド ■前回の内容を完了した方 続いて、 git merge vol/02 ローカルリポジトリのvol/02 ブランチをmasterブランチにマージ
- 41. gitのブランチを整える git checkout master コマンド 続いて、 git reset --hard upstream/vol/02-finish ■前回の内容を途中までやった方と今回から参加の方 upstreamリポジトリのvol/02-finish ブランチをmasterブランチにマージ
- 43. gitのブランチを整える git branch vol/03 コマンド 続いて、 git checkout vol/03 今回の作業用である、 「vol/03」ブランチを作成する これでブランチ作成、チェックアウトまで完了！
- 44. Marionetteライブラリ ダウンロード メニュー ■ gitのブランチを整える ■ Marionetteのライブラリダウンロード ■ Lesson1 エントリポイント・ルーティング・コントローラ ■ Lesson2 TODO一覧画面にMarionetteのビューを適用 ■ Lesson3 TODO詳細画面にMarionetteのビューを適用
- 45. Marionetteライブラリダウンロード ダウンロード先ディレクトリ ココ /var/www/study/rest-study/ ├── app │ ∼略∼ │ └── webroot │ ├── css │ ├── files │ ├── img │ └── js │ ├── collections │ ├── lib │ ├── models │ ├── routers │ └── views /var/www/study/rest-study/app/webroot/js/lib wget http://marionettejs.com/downloads/backbone.marionette.min.js ダウンロード元（Marionette.js公式サイト） http://marionettejs.com/downloads/backbone.marionette.min.js wgetコマンドでダウンロード
- 46. Lesson1 エントリポイント ルーティング コントローラ メニュー ■ gitのブランチを整える ■ Marionetteのライブラリダウンロード ■ Lesson1 エントリポイント・ルーティング・コントローラ ■ Lesson2 TODO一覧画面にMarionetteのビューを適用 ■ Lesson3 TODO詳細画面にMarionetteのビューを適用
- 48. エントリポイントの変更 エントリポイントは、 「app.js」 • app.jsはただの関数（Backbone関係なし） • routerをインスタンス化 • Backbone.history.start() を実行して「hashchangeイベント」の監視を開始 修正前 修正後 エントリポイントは、 「main.js」に変更 • app.jsで上記処理を実装 • app.jsは “Marionette.Application” を継承する • main.jsでは、app.jsで実装した機能を”start”するだけ • main.jsはだだの関数（BackboneもMarionetteも関係なし）
- 49. ルータとコントローラの分離 「router.js」が、ルータとコントローラを兼ねていた • ルーティング設定を書く • ルーティング後に実行される関数の実装も書く 修正前 修正後 「router.js」と「controller.js」に分離 • router.js • ルーティング設定のみ • “Marionette.AppRouter” を継承する • controller.js • ルーティング後に実行される関数の実装を書く • “Marionette.Controller” を継承する
- 50. いざ開発！
- 52. Lesson2 TODO一覧画面に Marionetteのビューを適用 メニュー ■ gitのブランチを整える ■ Marionetteのライブラリダウンロード ■ Lesson1 エントリポイント・ルーティング・コントローラ ■ Lesson2 TODO一覧画面にMarionetteのビューを適用 ■ Lesson3 TODO詳細画面にMarionetteのビューを適用
- 53. Lesson2 TODO一覧画面にMarionetteのビューを適用 • Region • LayoutView • CompositeView • ItemView ■ポイント MarionetteのRegionと各View の役割を理解する
- 55. TODO一覧画面でのRegionと各Viewの役割 • LayoutViewを表示するためのコンテナ • Region内にLayoutViewを表示する処理はcontroller.js内に記述している Region（app.js内で定義） LayoutViewRegion controller.js • app.js内で定義されたRegionにLayoutViewを表示する ⇢app.application.mainRegion.show(new View(option)); controller.js で表示処理 app.js todo-layout-view.js
- 56. TODO一覧画面でのRegionと各Viewの役割 • TODO一覧画面のコンテンツ全体をレイアウトする(Templateを持つ) • TODO一覧データ（CompositeView）を表示するためのRegionを定義している • collectionをfetchしてデータを取得し、Region内にCompositeViewを表示する LayoutView（todo-layout-view.jsで定義） CompositeView LayoutView todo-layout-view.js Region データ (Collection) todo-composite-view.js 取得 はめ込む 生成
- 57. TODO一覧画面でのRegionと各Viewの役割 • TODO追加用<textArea>、一覧表示用<table>を表示(Templateを持つ) • TODO追加ボタンのクリックイベントを処理する • collectionにデータを追加（collection.create())する • TODO１件を表示するItemViewのオブジェクトと表示位置を指定 CompositeView（todo-composite-view.jsで定義） ItemView CompositeView todo-composite-view.js todo-item-view.js 使用する ItemViewを指定 • ChildView : ItemView • ChildViewContainer : ‘tbody’ データ (Collection) 追加ボタンクリック時 にcollection.create() Template
- 58. TODO一覧画面でのRegionと各Viewの役割 • TODO表示用<tr>、チェックボックス、削除リンク、詳細リンクを表示(Templateを持つ) • チェックボックス、削除リンクのクリックイベントを処理する • データ（Model）を削除（model.destroy())する ItemView（todo-item-view.jsで定義） ItemView todo-item-view.js データ (Collection) 削除リンククリック時 にmodel.destroy() Template
- 59. Lesson3 TODO詳細画面に Marionetteのビューを適用 メニュー ■ gitのブランチを整える ■ Marionetteのライブラリダウンロード ■ Lesson1 エントリポイント・ルーティング・コントローラ ■ Lesson2 TODO一覧画面にMarionetteのビューを適用 ■ Lesson3 TODO詳細画面にMarionetteのビューを適用
- 60. Lesson3 TODO詳細画面にMarionetteのビューを適用 • Region • LayoutView • ItemView ■ポイント Lesson2とほぼ同じです • ※CompositeViewがないだけ マニュアル見つつやってみしょう！
- 61. いざ開発！