はじめよう Backbone.js
Melden
Hiroki ToyokawaFolgen
25. Feb 2013•0 gefällt mir•41,685 Aufrufe
65 gefällt mir
Sei der Erste, dem dies gefällt
Mehr anzeigen
Aufrufe
Aufrufe insgesamt
0
Auf Slideshare
0
Aus Einbettungen
0
Anzahl der Einbettungen
0
はじめよう Backbone.js
25. Feb 2013•0 gefällt mir•41,685 Aufrufe
65 gefällt mir
Sei der Erste, dem dies gefällt
Mehr anzeigen
Aufrufe
Aufrufe insgesamt
0
Auf Slideshare
0
Aus Einbettungen
0
Anzahl der Einbettungen
0
Downloaden Sie, um offline zu lesen
Melden
2013年2月25日(月) に開催されました TechBuzz 第4回.js系開発技術勉強会で発表させていただきましたスライドになります。内容は Backbone.js の入門となっております。
Hiroki ToyokawaFolgen
はじめよう Backbone.js
- はじめよう Backbone.js TechBuzz 第4回.js系開発技術勉強会
- アウトライン 1.スピーカーについて 2.発表の目的 3.Backbone.js とは 4.デモとソースの解説
- はじめに自己紹介を
- スピーカーについて •豊川 弘樹 (25歳) •アプリケーションエンジニア •19歳のとき初めて C++ でオセロゲームを作る •好きな言語は JavaScript, PHP, Obj-C •好きな動物はアルパカ •個人でも活動中@スタジオエサクレ
- 最近つくったもの •iPhone アプリ •なぞるロックで大切な写真を保管 •2月いっぱいは無料です •http://studio-esakure.com/my-picture/
- 発表の目的は?
- 発表を聞いてできること •Backbone.js がどんなものか想像できる •Backbone.js のメリット・デメリットがわかる •実際に Backbone.js を使ったソースを見る
- 発表を聞いてもできないこと •Backbone.js を使った開発ができるようになる •Backbone.js 以外の JS フレームワークとの比較 •イケてる Web サービスを作って異性にモテる
- Backbone.js のあらまし
- Backbone.js とは •JavaScript の MVC フレームワーク •大規模開発で効果を発揮する •JavaScript フレームワークの中では知名度高い •Rails や CakePHP など一般的に MVC と呼ばれる ※ フレームワークとは大きく異なる ※ 正確には MVC2 •オブザーバ・パターン
- Backbone.js とは •JavaScript の MVC フレームワーク •大規模開発で効果を発揮する 自分で調べてみ てね!! •JavaScript フレームワークの中では知名度高い •Rails や CakePHP など一般的に MVC と呼ばれる ※ フレームワークとは大きく異なる ※ 正確には MVC2 •オブザーバ・パターン
- Backbone.js とは •JavaScript の MVC フレームワーク •大規模開発で効果を発揮する •JavaScript フレームワークの中では知名度高い •Rails や CakePHP など一般的に MVC と呼ばれる ※ フレームワークとは大きく異なる ※ 正確には MVC2 ? •オブザーバ・パターン
- オブザーバ・パターン “ •オブジェクトの状態を観察するような プログラムで使われるデザインパターンの一種 ” ウィキペディア •JavaScript はユーザーのアクション (イベント) を 観察 (監視) するイベント駆動プログラミングが得意 •Backbone.js ではオブジェクトの状態変化も イベントとして監視する
- オブザーバ・パターン “ •オブジェクトの状態を観察するような プログラムで使われるデザインパターンの一種 ” クリック時に ∼する ウィキペディア •JavaScript はユーザーのアクション (イベント) を 観察 (監視) するイベント駆動プログラミングが得意 •Backbone.js ではオブジェクトの状態変化も イベントとして監視する
- オブザーバ・パターン “ •オブジェクトの状態を観察するような プログラムで使われるデザインパターンの一種 ” ウィキペディア •JavaScript はユーザーのアクションこれ大事!!を (イベント) 観察 (監視) するイベント駆動プログラミングが得意 •Backbone.js ではオブジェクトの状態変化も イベントとして監視する
- Backbone.js のオブジェクト •View ... DOM の監視と操作 •Model ... データの取得・保存・更新・削除 •Collection ... Model の集合 •Router ... URL の監視 •History ... Router の履歴監視 •Controller というオブジェクトは存在しない
- Backbone.js のオブジェクト •View ... DOM の監視と操作 •Model ... データの取得・保存・更新・削除 •Collection ... Model の集合 •Router ... URL の監視 これ大事!! •History ... Router の履歴監視 •Controller というオブジェクトは存在しない
- Backbone.js の MVC M V C Model Router View Collection History
- Backbone.js の MVC MV重要!! M V C Model Router View Collection History
- Collection
- ＼C じゃないよ...!!／ Collection
- ここまでのまとめ •Backbone.js は JavaScript の MVC フレームワーク •一般的な MVC2 フレームワークとは違うらしい •イベント駆動のオブザーバ・パターン •Controller というオブジェクトはない •M と V が大事らしい
- もっと具体的なおはなし
- ある Web サービス Model Collection View ユーザ
- Model Collection ＼監視するぜ...!!／ View
- Model Collection 監視 監視 View 監視
- Model Collection ＼クリックされた...!!／ View クリック(イベント) この記事見 たいよ
- ＼待ってろ...!!／ Model Collection 呼び出し ＼データくれ...!!／ View
- 非同期通信 (Ajax) Model Collection ・・・ View
- ＼取得OK...!!／ 状態変化 Model Collection イベント ＼きたか...!!／ View
- Model Collection ＼おまたせ...!!／ View 表示 ♪
- Collection
- ＼出番なし...!?／ Collection
- Collection 補足 •記事単体を扱うのが Model なら 記事一覧など Model の集合を扱うのが Collection •基本的には Model と同じ •Model <-> Collection で相互にイベント監視
- ここまでのまとめ •View がユーザ, Model, Collection のイベントを監視 •Model, Collection は非同期通信 (Ajax) で Web API とデータをやりとりする •データを取得 (更新) すると状態変化して イベントが発生する
- 実際に使ってみました
- デモ •1週間の天気予報を JSONP で取得して表示 http://apps.alpacat.com/backbone_sample/
- HTML
- HTML (抜粋) <head> <script type="text/javascript" src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script> <script type="text/javascript" src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script> <script type="text/javascript" src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> </head> <body> <div id="content"> <ul id="nav-‐‑‒bar" class="nav nav-‐‑‒tabs" style="margin-‐‑‒bottom:10px;"> <li class="nav-‐‑‒items active"><a href="javascript:void(0);">東京</a></li> <li class="nav-‐‑‒items"><a href="javascript:void(0);">⼤大阪</a></li> </ul> <ul id="weekly"></ul> </div> <script type="text/javascript" src="lib/backbone/models/weather.js"></script> <script type="text/javascript" src="lib/backbone/views/content.js"></script> <script type="text/javascript"> var weather = new Weather(); var contentView = new ContentView({model:weather}); </script> </body>
- HTML (抜粋) JS 読み込み <head> <script type="text/javascript" src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script> <script type="text/javascript" src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script> <script type="text/javascript" src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> </head> <body> <div id="content"> <ul id="nav-‐‑‒bar" class="nav nav-‐‑‒tabs" style="margin-‐‑‒bottom:10px;"> <li class="nav-‐‑‒items active"><a href="javascript:void(0);">東京</a></li> <li class="nav-‐‑‒items"><a href="javascript:void(0);">⼤大阪</a></li> </ul> <ul id="weekly"></ul> </div> <script type="text/javascript" src="lib/backbone/models/weather.js"></script> <script type="text/javascript" src="lib/backbone/views/content.js"></script> <script type="text/javascript"> var weather = new Weather(); var contentView = new ContentView({model:weather}); </script> </body>
- HTML (抜粋) <head> <script type="text/javascript" src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script> <script type="text/javascript" src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script> <script type="text/javascript" src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> View で扱 </head> う <body> <div id="content"> <ul id="nav-‐‑‒bar" class="nav nav-‐‑‒tabs" style="margin-‐‑‒bottom:10px;"> <li class="nav-‐‑‒items active"><a href="javascript:void(0);">東京</a></li> <li class="nav-‐‑‒items"><a href="javascript:void(0);">⼤大阪</a></li> </ul> <ul id="weekly"></ul> </div> <script type="text/javascript" src="lib/backbone/models/weather.js"></script> <script type="text/javascript" src="lib/backbone/views/content.js"></script> <script type="text/javascript"> var weather = new Weather(); var contentView = new ContentView({model:weather}); </script> </body>
- HTML (抜粋) <head> <script type="text/javascript" src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script> <script type="text/javascript" src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script> <script type="text/javascript" src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> </head> <body> <div id="content"> <ul id="nav-‐‑‒bar" class="nav nav-‐‑‒tabs" style="margin-‐‑‒bottom:10px;"> <li class="nav-‐‑‒items active"><a href="javascript:void(0);">東京</a></li> <li class="nav-‐‑‒items"><a href="javascript:void(0);">⼤大阪</a></li> </ul> オブジェクト <ul id="weekly"></ul> 定義読み込み </div> <script type="text/javascript" src="lib/backbone/models/weather.js"></script> <script type="text/javascript" src="lib/backbone/views/content.js"></script> <script type="text/javascript"> var weather = new Weather(); var contentView = new ContentView({model:weather}); </script> </body>
- HTML (抜粋) <head> <script type="text/javascript" src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script> <script type="text/javascript" src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script> <script type="text/javascript" src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> </head> <body> <div id="content"> <ul id="nav-‐‑‒bar" class="nav nav-‐‑‒tabs" style="margin-‐‑‒bottom:10px;"> <li class="nav-‐‑‒items active"><a href="javascript:void(0);">東京</a></li> <li class="nav-‐‑‒items"><a href="javascript:void(0);">⼤大阪</a></li> </ul> <ul id="weekly"></ul> </div> 実体化 <script type="text/javascript" src="lib/backbone/models/weather.js"></script> <script type="text/javascript" src="lib/backbone/views/content.js"></script> <script type="text/javascript"> var weather = new Weather(); var contentView = new ContentView({model:weather}); </script> </body>
- HTML (抜粋) <head> <script type="text/javascript" src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script> <script type="text/javascript" src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script> <script type="text/javascript" src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> </head> <body> <div id="content"> <ul id="nav-‐‑‒bar" class="nav nav-‐‑‒tabs" style="margin-‐‑‒bottom:10px;"> <li class="nav-‐‑‒items active"><a href="javascript:void(0);">東京</a></li> <li class="nav-‐‑‒items"><a href="javascript:void(0);">⼤大阪</a></li> </ul> <ul id="weekly"></ul> </div> <script type="text/javascript" src="lib/backbone/models/weather.js"></script> Model 実体 化 <script type="text/javascript" src="lib/backbone/views/content.js"></script> <script type="text/javascript"> var weather = new Weather(); var contentView = new ContentView({model:weather}); </script> </body>
- HTML (抜粋) <head> <script type="text/javascript" src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script> <script type="text/javascript" src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script> <script type="text/javascript" src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> </head> <body> <div id="content"> <ul id="nav-‐‑‒bar" class="nav nav-‐‑‒tabs" style="margin-‐‑‒bottom:10px;"> <li class="nav-‐‑‒items active"><a href="javascript:void(0);">東京</a></li> <li class="nav-‐‑‒items"><a href="javascript:void(0);">⼤大阪</a></li> </ul> <ul id="weekly"></ul> </div> <script type="text/javascript" src="lib/backbone/models/weather.js"></script> View 実体 <script type="text/javascript" src="lib/backbone/views/content.js"></script> <script type="text/javascript"> 化 var weather = new Weather(); var contentView = new ContentView({model:weather}); </script> </body>
- HTML (抜粋) <head> <script type="text/javascript" src="lib/jquery/jquery-‐‑‒1.9.1.min.js"></script> <script type="text/javascript" src="lib/underscore/underscore-‐‑‒1.4.4.min.js"></script> <script type="text/javascript" src="lib/backbone/backbone-‐‑‒0.9.10.min.js"></script> </head> <body> <div id="content"> <ul id="nav-‐‑‒bar" class="nav nav-‐‑‒tabs" style="margin-‐‑‒bottom:10px;"> <li class="nav-‐‑‒items active"><a href="javascript:void(0);">東京</a></li> <li class="nav-‐‑‒items"><a href="javascript:void(0);">⼤大阪</a></li> </ul> <ul id="weekly"></ul> </div> 監視するモデル のセット <script type="text/javascript" src="lib/backbone/models/weather.js"></script> View 実体 <script type="text/javascript" src="lib/backbone/views/content.js"></script> <script type="text/javascript"> 化 var weather = new Weather(); var contentView = new ContentView({model:weather}); </script> </body>
- Model
- Backbone.Model.Weather var Weather = Backbone.Model.extend({ defaults: { "pref": 13 }, url: function(){ return "pipe.php?pref=" + this.get("pref"); }, sync: function(method, model, options){ /* 省省略略: JSONP 取得⽤用に Backbone.sync をオーバーライド */ Backbone.sync(method, model, params); }, parse: function(res){ var parsed; var pref = this.get("pref"); /* 省省略略: 都道府県に合わせてデータ整形 */ return parsed; } });
- Backbone.Model.Weather 初期値セッ ト var Weather = Backbone.Model.extend({ defaults: { "pref": 13 }, url: function(){ return "pipe.php?pref=" + this.get("pref"); }, sync: function(method, model, options){ /* 省省略略: JSONP 取得⽤用に Backbone.sync をオーバーライド */ Backbone.sync(method, model, params); }, parse: function(res){ var parsed; var pref = this.get("pref"); /* 省省略略: 都道府県に合わせてデータ整形 */ return parsed; } });
- Backbone.Model.Weather var Weather = Backbone.Model.extend({ defaults: { "pref": 13 API の UR }, L url: function(){ return "pipe.php?pref=" + this.get("pref"); }, sync: function(method, model, options){ /* 省省略略: JSONP 取得⽤用に Backbone.sync をオーバーライド */ Backbone.sync(method, model, params); }, parse: function(res){ var parsed; var pref = this.get("pref"); /* 省省略略: 都道府県に合わせてデータ整形 */ return parsed; } });
- Backbone.Model.Weather var Weather = Backbone.Model.extend({ defaults: { "pref": 13 }, url: function(){ データ取得用 メソッド return "pipe.php?pref=" + this.get("pref"); }, sync: function(method, model, options){ /* 省省略略: JSONP 取得⽤用に Backbone.sync をオーバーライド */ Backbone.sync(method, model, params); }, parse: function(res){ var parsed; var pref = this.get("pref"); /* 省省略略: 都道府県に合わせてデータ整形 */ return parsed; } });
- Backbone.Model.Weather var Weather = Backbone.Model.extend({ defaults: { "pref": 13 }, url: function(){ return "pipe.php?pref=" + this.get("pref"); }, sync: function(method, model, options){ データ取得後 /* 省省略略: JSONP 取得⽤用に Backbone.sync をオーバーライド */ に呼ばれる Backbone.sync(method, model, params); }, parse: function(res){ var parsed; var pref = this.get("pref"); /* 省省略略: 都道府県に合わせてデータ整形 */ return parsed; } });
- Backbone.Model.Weather var Weather = Backbone.Model.extend({ defaults: { "pref": 13 }, url: function(){ return したデ ータ return "pipe.php?pref=" + this.get("pref"); が属 性になる }, sync: function(method, model, options){ データ取得後 /* 省省略略: JSONP 取得⽤用に Backbone.sync をオーバーライド */ に呼ばれる Backbone.sync(method, model, params); }, parse: function(res){ var parsed; var pref = this.get("pref"); /* 省省略略: 都道府県に合わせてデータ整形 */ return parsed; } });
- View
- Backbone.View.ContentView var ContentView = Backbone.View.extend({ el: "div#content", events: { "click .nav-‐‑‒items": "clickedNavItems" }, initialize: function() { this.listenTo(this.model, "change", this.render); this.model.fetch(); }, clickedNavItems: function(e) { /* 省省略略: 東京、⼤大阪のどちらがクリックされたかを判断 */ if (pref && pref != this.model.get("pref")) { this.model.set({pref: pref}, {silent: true}); this.model.fetch(); } /* 省省略略: ナビバーボタンの選択、⾮非選択スタイルをセット */ }, render: function() { var weekly = this.model.get("info"); /* 省省略略: Model から受け取った情報に基づき HTML を描画 */ } });
- Backbone.View.ContentView var ContentView = Backbone.View.extend({ el: "div#content", 対象の要素 events: { "click .nav-‐‑‒items": "clickedNavItems" }, initialize: function() { this.listenTo(this.model, "change", this.render); this.model.fetch(); }, clickedNavItems: function(e) { /* 省省略略: 東京、⼤大阪のどちらがクリックされたかを判断 */ if (pref && pref != this.model.get("pref")) { this.model.set({pref: pref}, {silent: true}); this.model.fetch(); } /* 省省略略: ナビバーボタンの選択、⾮非選択スタイルをセット */ }, render: function() { var weekly = this.model.get("info"); /* 省省略略: Model から受け取った情報に基づき HTML を描画 */ } });
- Backbone.View.ContentView 監視イベントと コールバック var ContentView = Backbone.View.extend({ el: "div#content", events: { "click .nav-‐‑‒items": "clickedNavItems" }, initialize: function() { this.listenTo(this.model, "change", this.render); this.model.fetch(); }, clickedNavItems: function(e) { /* 省省略略: 東京、⼤大阪のどちらがクリックされたかを判断 */ if (pref && pref != this.model.get("pref")) { this.model.set({pref: pref}, {silent: true}); this.model.fetch(); } /* 省省略略: ナビバーボタンの選択、⾮非選択スタイルをセット */ }, render: function() { var weekly = this.model.get("info"); /* 省省略略: Model から受け取った情報に基づき HTML を描画 */ } });
- Backbone.View.ContentView var ContentView = Backbone.View.extend({ el: "div#content", events: { 初期化 "click .nav-‐‑‒items": "clickedNavItems" }, initialize: function() { this.listenTo(this.model, "change", this.render); this.model.fetch(); }, clickedNavItems: function(e) { /* 省省略略: 東京、⼤大阪のどちらがクリックされたかを判断 */ if (pref && pref != this.model.get("pref")) { this.model.set({pref: pref}, {silent: true}); this.model.fetch(); } /* 省省略略: ナビバーボタンの選択、⾮非選択スタイルをセット */ }, render: function() { var weekly = this.model.get("info"); /* 省省略略: Model から受け取った情報に基づき HTML を描画 */ } });
- Backbone.View.ContentView var ContentView = Backbone.View.extend({ el: "div#content", events: { "click .nav-‐‑‒items": "clickedNavItems" Model 監視 }, initialize: function() { this.listenTo(this.model, "change", this.render); this.model.fetch(); }, clickedNavItems: function(e) { /* 省省略略: 東京、⼤大阪のどちらがクリックされたかを判断 */ if (pref && pref != this.model.get("pref")) { this.model.set({pref: pref}, {silent: true}); this.model.fetch(); } /* 省省略略: ナビバーボタンの選択、⾮非選択スタイルをセット */ }, render: function() { var weekly = this.model.get("info"); /* 省省略略: Model から受け取った情報に基づき HTML を描画 */ } });
- Backbone.View.ContentView var ContentView = Backbone.View.extend({ el: "div#content", events: { "click .nav-‐‑‒items": "clickedNavItems" }, データ取得 initialize: function() { this.listenTo(this.model, "change", this.render); this.model.fetch(); }, clickedNavItems: function(e) { /* 省省略略: 東京、⼤大阪のどちらがクリックされたかを判断 */ if (pref && pref != this.model.get("pref")) { this.model.set({pref: pref}, {silent: true}); this.model.fetch(); } /* 省省略略: ナビバーボタンの選択、⾮非選択スタイルをセット */ }, render: function() { var weekly = this.model.get("info"); /* 省省略略: Model から受け取った情報に基づき HTML を描画 */ } });
- Backbone.View.ContentView var ContentView = Backbone.View.extend({ el: "div#content", events: { "click .nav-‐‑‒items": "clickedNavItems" }, initialize: function() { オリジナルのコ ールバック this.listenTo(this.model, "change", this.render); this.model.fetch(); }, clickedNavItems: function(e) { /* 省省略略: 東京、⼤大阪のどちらがクリックされたかを判断 */ if (pref && pref != this.model.get("pref")) { this.model.set({pref: pref}, {silent: true}); this.model.fetch(); } /* 省省略略: ナビバーボタンの選択、⾮非選択スタイルをセット */ }, render: function() { var weekly = this.model.get("info"); /* 省省略略: Model から受け取った情報に基づき HTML を描画 */ } });
- Backbone.View.ContentView var ContentView = Backbone.View.extend({ el: "div#content", events: { "click .nav-‐‑‒items": "clickedNavItems" }, initialize: function() { this.listenTo(this.model, "change", this.render); this.model.fetch(); }, モデル clickedNavItems: function(e) { に属性をセッ ト /* 省省略略: 東京、⼤大阪のどちらがクリックされたかを判断 */ if (pref && pref != this.model.get("pref")) { this.model.set({pref: pref}, {silent: true}); this.model.fetch(); } /* 省省略略: ナビバーボタンの選択、⾮非選択スタイルをセット */ }, render: function() { var weekly = this.model.get("info"); /* 省省略略: Model から受け取った情報に基づき HTML を描画 */ } });
- Backbone.View.ContentView var ContentView = Backbone.View.extend({ el: "div#content", events: { "click .nav-‐‑‒items": "clickedNavItems" }, initialize: function() { this.listenTo(this.model, "change", this.render); this.model.fetch(); }, clickedNavItems: function(e) { /* 省省略略: 東京、⼤大阪のどちらがクリックされたかを判断 */ データ取得 if (pref && pref != this.model.get("pref")) { this.model.set({pref: pref}, {silent: true}); this.model.fetch(); } /* 省省略略: ナビバーボタンの選択、⾮非選択スタイルをセット */ }, render: function() { var weekly = this.model.get("info"); /* 省省略略: Model から受け取った情報に基づき HTML を描画 */ } });
- Backbone.View.ContentView var ContentView = Backbone.View.extend({ el: "div#content", events: { "click .nav-‐‑‒items": "clickedNavItems" }, initialize: function() { this.listenTo(this.model, "change", this.render); this.model.fetch(); }, clickedNavItems: function(e) { /* 省省略略: 東京、⼤大阪のどちらがクリックされたかを判断 */ if (pref && pref != this.model.get("pref")) { this.model.set({pref: pref}, {silent: true}); this.model.fetch(); } 描画 /* 省省略略: ナビバーボタンの選択、⾮非選択スタイルをセット */ }, render: function() { var weekly = this.model.get("info"); /* 省省略略: Model から受け取った情報に基づき HTML を描画 */ } });
- Backbone.View.ContentView var ContentView = Backbone.View.extend({ el: "div#content", events: { "click .nav-‐‑‒items": "clickedNavItems" }, initialize: function() { this.listenTo(this.model, "change", this.render); this.model.fetch(); }, clickedNavItems: function(e) { /* 省省略略: 東京、⼤大阪のどちらがクリックされたかを判断 */ if (pref && pref != this.model.get("pref")) { this.model.set({pref: pref}, {silent: true}); this.model.fetch(); } モデルの属性( データ)を取得 /* 省省略略: ナビバーボタンの選択、⾮非選択スタイルをセット */ }, render: function() { var weekly = this.model.get("info"); /* 省省略略: Model から受け取った情報に基づき HTML を描画 */ } });
- デモのソースは GitHub にあります https://github.com/otoyo0122/backbone_sample ＼Apache 上で動かしてみてね!!／
- ＼すごいぞ Backbone.js !!／ Collection
- ヒソヒソ... (この規模なら使う必要なくね?) Collection ヒソヒソ... (普通に書いた方が早い気が...)
- Backbone.js とは これ大事!! •JavaScript の MVC フレームワーク •大規模開発で効果を発揮する •JavaScript フレームワークの中では知名度高い •Rails や CakePHP など一般的に MVC と呼ばれる ※ フレームワークとは大きく異なる ※ 正確には MVC2 •オブザーバ・パターン
- ＼えっ!?／ Collection
- fin.
- 参考文献 •Backbone.js http://backbonejs.org/ •Backbone.js 入門 http://qiita.com/items/16b799d0ec0a0ae3f78e