Embed Size (px)
Citation preview
ワークショップ■ Lesson1 エントリポイント・ルーティング・コントローラ ■ Lesson2 TODO一覧画面にMarionetteのビューを適用 ■ Lesson3 TODO詳細画面にMarionetteのビューを適用
進め方1. Marionetteの解説（5分） 2. 事前準備についての解説（5分） 3. 事前準備作業 4. Lesson1の解説（5分） 5. Lesson1の作業（20分） ⇢制限時間内に間に合わない場合は解答をコピペして次のLessonへ。 6. Lesson2の解説 ～以下Lesson3まで同様～
Marionetteで コードがどう変わるか
View周りの改善がメイン
• Router, Controllerも少し改善 • 細かいのも有りますが今回はあまり触れません
View周りの改善
1. Viewの切り替えが楽 2. ネストしたViewの管理が楽 3. テンプレートの描画が楽 4. その他
1. Viewの切り替えが 簡単
ビューの切り替えMarionetteがない時
表示中のビューを削除 （HTMLエレメントごと消える！）
HTMLエレメントを再作成
再作成したHTMLエレメントに Viewを表示
ビュー表示中？No
Yes
// 現在のビュー 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がない時
ビューの切り替え
Marionetteがある時
リージョンにビューを表示
ビューの切り替え（コード例）
Marionetteがある時
showTodoLists : function() { app.application.mainRegion.show(new app.TodoCollectionView()); }
「Region（リージョン）」に嵌めこむだけ！ ※リージョンについては後ほど
2. ネストしたViewの 管理が楽
TODO一覧View
ネストしたViewの例■ TODO一覧ViewとTODO１件View
TODO１件View
TODO１件View
TODO１件View
TODO１件View
ネストしたView - 「TODO１件View」を表示するMarionetteがない時
表示するModelを準備
TODO１件Viewを生成
TODO１件Viewをrenderして HTMLエレメント取得
取得したHTMLエレメントを 親HTMLエレメントにAppend
// 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がない時
Marionetteがある時
TODO１件Viewのオブジェクト名を設定
ネストしたView - 「TODO１件View」を表示する
親HTMLエレメントを設定
childView : app.TodoItemView, childViewContainer : 'tbody',
・TODO1件ビューのオブジェクト名 ・親HTMLエレメント を設定するだけ！
ネストしたView - 「TODO１件View」を表示する
Marionetteがある時
YコンテンツLayoutView
XコンテンツLayoutView
ネストしたViewの例■ Viewの階層構造
コンテンツRegionメニューボタン表示Region
ヘッダRegion
フッタRegion データ表示Region
ページ切り替えボタン表示Region
メニューボタン表示View
データ表示View
ページ切り替えボタン表示View
ヘッダ表示View
フッタ表示View
「Region（リージョン）」 という便利機能！
3. テンプレート の描画が楽
Marionetteがない時
テンプレートのHTMLエレメントを取得
Modelから表示用データを取り出す
描画する
テンプレートの描画
// テンプレートのHTMLエレメントを取得 template : _.template($(‘#detail-template').html()),
// 描画関数 render : function() { // Modelから表示用データを取り出す var data = this.model.toJSON(); // 描画する this.$el.html(this.template(data)); },
Marionetteがない時テンプレートの描画
テンプレートの描画
Marionetteがある時
テンプレートのIDを設定
template: “#todo-detail-item-template",
Marionetteがある時テンプレートの描画
template変数に使用するID を指定するだけ！
4. その他
•ui変数 • ビュー内のHTMLエレメントのセレクタの記述を一箇所に集約する。 • `@ui.～`の形式でビュー内から参照可能となる。
•regions変数 • リージョンを簡単に定義する。
•triggers, trigger • triggerで発火したイベントをtriggersで購読して関数実行
•behaviors •共通処理をMixInする機能
•etc...
その他
ui変数とregions変数は今回扱います。 その他は調べてみましょう！
本日のワークショップ
メニュー■ gitのブランチを整える ■ Marionetteライブラリダウンロード ■ Lesson1 エントリポイント・ルーティング・コントローラ ■ Lesson2 TODO一覧画面にMarionetteのビューを適用 ■ Lesson3 TODO詳細画面にMarionetteのビューを適用
gitのブランチ を整える
メニュー ■ gitのブランチを整える
■ Marionetteライブラリダウンロード ■ Lesson1 エントリポイント・ルーティング・コントローラ ■ Lesson2 TODO一覧画面にMarionetteのビューを適用 ■ Lesson3 TODO詳細画面にMarionetteのビューを適用
gitのブランチを整える
■masterブランチを前回の終了状態にする
■masterブランチを元に、今回の作業用である、 「vol/03」ブランチを作成する
※作業の過程で、今回の内容を終えた状態の “解答ブランチ”である、 「vol/03-finish」ブランチも取得されます。
どう整えるのか
gitのブランチを整える
人によってやり方が違います！（重要）
■前回の内容を完了した方 ⇢vol/02ブランチが綺麗に完了済み！
■前回の内容を途中までやった方 ⇢vol/02ブランチが編集途中の状態
■今回から参加の方 （第1回勉強会の内容は終えている状態） ⇢vol/02ブランチは作っていない！
gitのブランチを整える
ともかく Commit！
■前回の内容を途中までやった方
未コミットのファイルを無くしてきれいにする！
gitのブランチを整える
次の手順はみんな同じです！
■前回の内容を完了した方■前回の内容を途中までやった方
■今回から参加の方
gitのブランチを整える
鈴木商店GitHubを リモートリポジトリとして追加する
第1回で、鈴木商店GitHubからforkしました。 「鈴木商店GitHub」を「リモートリポジトリ」 として登録する作業です。
gitのブランチを整える
origin upstream ←これがあればOK！
鈴木商店GitHubをリモートリポジトリとして追加する
git remote
とやって、下記が表示される人は既にこの作業が終わっています。次へ行きましょう。
gitのブランチを整える
git remote add upstream https://github.com/suzukishouten-study/rest-study.git
鈴木商店GitHubをリモートリポジトリとして追加する
コマンド （実際は一行です）
鈴木商店GitHub https://github.com/suzukishouten-study/rest-study.git を、リモートリポジトリ名 「upstream」 として登録する作業です。
鈴木商店 勉強会用GitHubリポジトリ
master
vol/02-finish
vol/03-finish
vol/01-finish
EC2インスタンス
作業用として使用 master
vol/02-finish
vol/03-finish
vol/01-finish
vol/02
vol/01
vol/03
ローカルリポジトリ
gitのブランチを整えるイメージ
upstream
自分の GitHubリポジトリ
master
vol/02
vol/01
originclone時に登録済み
これを登録！
gitのブランチを整える
次の手順もみんな同じです！
■前回の内容を完了した方■前回の内容を途中までやった方
■今回から参加の方
gitのブランチを整える
鈴木商店GitHubから最新のコミットを取得する前回の終了状態である 「vol/02-finish」ブランチを ローカルリポジトリに取得する作業です。 ※今回の終了状態として事前に用意した、 「vol/03-finish」ブランチも取得されます。
gitのブランチを整える
git fetch upstream
鈴木商店GitHubから最新のコミットを取得する
コマンド
gitのブランチを整える
次の手順は注意！■前回の内容を完了した方
■前回の内容を途中までやった方と今回から参加の方
ローカルリポジトリのvol/02 ブランチをmasterブランチにマージ
upstreamリポジトリのvol/02-finish ブランチをmasterブランチにマージ
gitのブランチを整える
git checkout masterコマンド
■前回の内容を完了した方
続いて、
git merge vol/02
ローカルリポジトリのvol/02 ブランチをmasterブランチにマージ
gitのブランチを整える
git checkout masterコマンド
続いて、
git reset --hard upstream/vol/02-finish
■前回の内容を途中までやった方と今回から参加の方
upstreamリポジトリのvol/02-finish ブランチをmasterブランチにマージ
gitのブランチを整える
最後の手順はみんな同じです！
これでmasterブランチは全員、 「前回の終了状態」
になりました！
gitのブランチを整える
git branch vol/03コマンド
続いて、
git checkout vol/03
今回の作業用である、 「vol/03」ブランチを作成する
これでブランチ作成、チェックアウトまで完了！
Marionetteライブラリ ダウンロード
メニュー ■ gitのブランチを整える
■ Marionetteのライブラリダウンロード
■ Lesson1 エントリポイント・ルーティング・コントローラ ■ Lesson2 TODO一覧画面にMarionetteのビューを適用 ■ Lesson3 TODO詳細画面にMarionetteのビューを適用
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コマンドでダウンロード
Lesson1エントリポイント ルーティング コントローラメニュー ■ gitのブランチを整える ■ Marionetteのライブラリダウンロード
■ Lesson1 エントリポイント・ルーティング・コントローラ ■ Lesson2 TODO一覧画面にMarionetteのビューを適用 ■ Lesson3 TODO詳細画面にMarionetteのビューを適用
Lesson1 エントリポイント・ルーティング・コントローラ
•エントリポイントの変更•ルータとコントローラの分離
■ポイント
エントリポイントの変更
エントリポイントは、「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も関係なし）
ルータとコントローラの分離
「router.js」が、ルータとコントローラを兼ねていた
• ルーティング設定を書く• ルーティング後に実行される関数の実装も書く
修正前
修正後「router.js」と「controller.js」に分離
• router.js• ルーティング設定のみ• “Marionette.AppRouter” を継承する
• controller.js• ルーティング後に実行される関数の実装を書く• “Marionette.Controller” を継承する
いざ開発！
マニュアル
http://goo.gl/r0Y2BWジーオーオー.ジーエル/ アールゼロワイ2ビーダブリュー
Lesson2TODO一覧画面に Marionetteのビューを適用
メニュー ■ gitのブランチを整える ■ Marionetteのライブラリダウンロード ■ Lesson1 エントリポイント・ルーティング・コントローラ
■ Lesson2 TODO一覧画面にMarionetteのビューを適用 ■ Lesson3 TODO詳細画面にMarionetteのビューを適用
Lesson2 TODO一覧画面にMarionetteのビューを適用
• Region • LayoutView• CompositeView• ItemView
■ポイント
MarionetteのRegionと各Viewの役割を理解する
Lesson2 TODO一覧画面にMarionetteのビューを適用
■ネスト構造
それぞれ下図の様に配置されます
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
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
取得
はめ込む
生成
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
TODO一覧画面でのRegionと各Viewの役割
• TODO表示用<tr>、チェックボックス、削除リンク、詳細リンクを表示(Templateを持つ)• チェックボックス、削除リンクのクリックイベントを処理する• データ（Model）を削除（model.destroy())する
ItemView（todo-item-view.jsで定義）
ItemView
todo-item-view.jsデータ
(Collection)
削除リンククリック時 にmodel.destroy()
Template
Lesson3TODO詳細画面に Marionetteのビューを適用
メニュー ■ gitのブランチを整える ■ Marionetteのライブラリダウンロード ■ Lesson1 エントリポイント・ルーティング・コントローラ ■ Lesson2 TODO一覧画面にMarionetteのビューを適用
■ Lesson3 TODO詳細画面にMarionetteのビューを適用
Lesson3 TODO詳細画面にMarionetteのビューを適用
• Region • LayoutView• ItemView
■ポイント
Lesson2とほぼ同じです• ※CompositeViewがないだけ
マニュアル見つつやってみしょう！
いざ開発！
