Enviar pesquisa
Carregar
Parse.comと始めるBackbone.js入門(jscafe7)
•
22 gostaram
•
4,838 visualizações
Ryuma Tsukano
Seguir
jscafeのBackboneの1回目。Parse(クラウドサービス)を使って、簡単なtodoアプリを作って、BackboneのMV*がどんな物か?見て行くという内容。
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 38
Baixar agora
Baixar para ler offline
Recomendados
クローラを作る技術と設計 (毎週のハンズオン勉強会資料)
クローラを作る技術と設計 (毎週のハンズオン勉強会資料)
ひとし あまの
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)
Ryuma Tsukano
Web技術勉強会 20100925
Web技術勉強会 20100925
龍一 田中
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
Masashi Haga
ウェブアプリのセキュリティをちゃんと知ろう (毎週のハンズオン勉強会の資料)
ウェブアプリのセキュリティをちゃんと知ろう (毎週のハンズオン勉強会の資料)
ひとし あまの
TreeFrog Frameworkの紹介
TreeFrog Frameworkの紹介
ao27
Gen-Template-for-Perl
Gen-Template-for-Perl
nasneg
Recomendados
クローラを作る技術と設計 (毎週のハンズオン勉強会資料)
クローラを作る技術と設計 (毎週のハンズオン勉強会資料)
ひとし あまの
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)
Ryuma Tsukano
Web技術勉強会 20100925
Web技術勉強会 20100925
龍一 田中
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
Masashi Haga
ウェブアプリのセキュリティをちゃんと知ろう (毎週のハンズオン勉強会の資料)
ウェブアプリのセキュリティをちゃんと知ろう (毎週のハンズオン勉強会の資料)
ひとし あまの
TreeFrog Frameworkの紹介
TreeFrog Frameworkの紹介
ao27
Gen-Template-for-Perl
Gen-Template-for-Perl
nasneg
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
Hiroaki KOBAYASHI
機械学習
機械学習
ssusere8ae711
FIRST STEP to Haxe/JavaScript
FIRST STEP to Haxe/JavaScript
terurou
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
ericsagnes
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話
terurou
メタメタプログラミングRuby
メタメタプログラミングRuby
emasaka
PHP Coding in BEAR.Sunday
PHP Coding in BEAR.Sunday
Akihito Koriyama
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
schoowebcampus
モテる JavaScript
モテる JavaScript
Osamu Monoe
Ruby test double
Ruby test double
Naotoshi Seo
20120327 phpstudy58-phake
20120327 phpstudy58-phake
Katsuhiro Ogawa
eZ Publish勉強会9月〜テンプレート言語〜
eZ Publish勉強会9月〜テンプレート言語〜
ericsagnes
DTrace for biginners part(2)
DTrace for biginners part(2)
Shoji Haraguchi
C#の新機能勉強会 ~ C#7、8の新機能を活用して速く安全なプログラムを書こう~
C#の新機能勉強会 ~ C#7、8の新機能を活用して速く安全なプログラムを書こう~
Fujio Kojima
Web講座 第6回
Web講座 第6回
nanametown
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js
iloveigloo
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
Mitsuru Ogawa
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
Toshio Ehara
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
Mais conteúdo relacionado
Mais procurados
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
Hiroaki KOBAYASHI
機械学習
機械学習
ssusere8ae711
FIRST STEP to Haxe/JavaScript
FIRST STEP to Haxe/JavaScript
terurou
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
ericsagnes
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話
terurou
メタメタプログラミングRuby
メタメタプログラミングRuby
emasaka
PHP Coding in BEAR.Sunday
PHP Coding in BEAR.Sunday
Akihito Koriyama
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
schoowebcampus
モテる JavaScript
モテる JavaScript
Osamu Monoe
Ruby test double
Ruby test double
Naotoshi Seo
20120327 phpstudy58-phake
20120327 phpstudy58-phake
Katsuhiro Ogawa
eZ Publish勉強会9月〜テンプレート言語〜
eZ Publish勉強会9月〜テンプレート言語〜
ericsagnes
DTrace for biginners part(2)
DTrace for biginners part(2)
Shoji Haraguchi
C#の新機能勉強会 ~ C#7、8の新機能を活用して速く安全なプログラムを書こう~
C#の新機能勉強会 ~ C#7、8の新機能を活用して速く安全なプログラムを書こう~
Fujio Kojima
Web講座 第6回
Web講座 第6回
nanametown
Mais procurados
(15)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
機械学習
機械学習
FIRST STEP to Haxe/JavaScript
FIRST STEP to Haxe/JavaScript
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
eZ Publish 2012年8月勉強会 - テンプレートオーバーライド
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話
メタメタプログラミングRuby
メタメタプログラミングRuby
PHP Coding in BEAR.Sunday
PHP Coding in BEAR.Sunday
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
モテる JavaScript
モテる JavaScript
Ruby test double
Ruby test double
20120327 phpstudy58-phake
20120327 phpstudy58-phake
eZ Publish勉強会9月〜テンプレート言語〜
eZ Publish勉強会9月〜テンプレート言語〜
DTrace for biginners part(2)
DTrace for biginners part(2)
C#の新機能勉強会 ~ C#7、8の新機能を活用して速く安全なプログラムを書こう~
C#の新機能勉強会 ~ C#7、8の新機能を活用して速く安全なプログラムを書こう~
Web講座 第6回
Web講座 第6回
Destaque
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js
iloveigloo
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
Mitsuru Ogawa
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
Toshio Ehara
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
Backbone.js
Backbone.js
daisuke shimizu
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
Destaque
(9)
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
はじめよう Backbone.js
はじめよう Backbone.js
Backbone.js
Backbone.js
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Semelhante a Parse.comと始めるBackbone.js入門(jscafe7)
scala+liftで遊ぼう
scala+liftで遊ぼう
youku
20110714 j queryベーシック
20110714 j queryベーシック
良太 増子
データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回
Naoyuki Yamada
Teclab3
Teclab3
Eikichi Yamaguchi
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Ext.direct
Ext.direct
Shuhei Aoyama
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Y Watanabe
JavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData API
Hajime Fujimoto
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
Djangoのススメ
Djangoのススメ
Alisue Lambda
Html5 Web Applications
Html5 Web Applications
totty jp
Vue入門
Vue入門
Takeo Noda
Tide - SmalltalkでSPA
Tide - SmalltalkでSPA
Masashi Umezawa
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
Hideki Hashizume
Ll xcode
Ll xcode
Net Kanayan
TensorFlowをもう少し詳しく入門
TensorFlowをもう少し詳しく入門
tak9029
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
linzhixing
Asp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソ
Yoshitaka Seo
StackStormを活用した運用自動化の実践
StackStormを活用した運用自動化の実践
Shu Sugimoto
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Semelhante a Parse.comと始めるBackbone.js入門(jscafe7)
(20)
scala+liftで遊ぼう
scala+liftで遊ぼう
20110714 j queryベーシック
20110714 j queryベーシック
データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回
Teclab3
Teclab3
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ext.direct
Ext.direct
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
JavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData API
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Djangoのススメ
Djangoのススメ
Html5 Web Applications
Html5 Web Applications
Vue入門
Vue入門
Tide - SmalltalkでSPA
Tide - SmalltalkでSPA
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
Ll xcode
Ll xcode
TensorFlowをもう少し詳しく入門
TensorFlowをもう少し詳しく入門
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Asp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソ
StackStormを活用した運用自動化の実践
StackStormを活用した運用自動化の実践
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Mais de Ryuma Tsukano
最近のTDDネタをカジュアルに
最近のTDDネタをカジュアルに
Ryuma Tsukano
関数型プログラミング in javascript
関数型プログラミング in javascript
Ryuma Tsukano
end to end testing(jscafe15)
end to end testing(jscafe15)
Ryuma Tsukano
introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)
Ryuma Tsukano
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
Ryuma Tsukano
公式page改ざんで学ぶjQuery入門 (jscafe7)
公式page改ざんで学ぶjQuery入門 (jscafe7)
Ryuma Tsukano
BDD by Jasmine (jscafe 13)
BDD by Jasmine (jscafe 13)
Ryuma Tsukano
Rails A/B testing by split gem
Rails A/B testing by split gem
Ryuma Tsukano
Mais de Ryuma Tsukano
(8)
最近のTDDネタをカジュアルに
最近のTDDネタをカジュアルに
関数型プログラミング in javascript
関数型プログラミング in javascript
end to end testing(jscafe15)
end to end testing(jscafe15)
introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
公式page改ざんで学ぶjQuery入門 (jscafe7)
公式page改ざんで学ぶjQuery入門 (jscafe7)
BDD by Jasmine (jscafe 13)
BDD by Jasmine (jscafe 13)
Rails A/B testing by split gem
Rails A/B testing by split gem
Último
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
Último
(9)
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Parse.comと始めるBackbone.js入門(jscafe7)
1.
jsCafe7(2013/5/19) introduction to Backbone.js with
Parse.com Ryuma Tsukano ×
2.
趣旨 BackboneのMV*とは何か? 実際のsourceを作って全体を把握するのが目的 ※単にアプリ作っても面白くないのでParseというBaaS使う
3.
目次 ● ● ● ● BackboneのMV*構成 Parse.com tutorial ソース振り返り
4.
Backboneの基本構成 Router HTTP Request model更新 Collection Models View modelイベント html描写 syncs DOM イベント Template Data Source (ex:DB/API) サーバー側
5.
BackboneのMV* ● model ○ データとそれに関するビジネスロジックを扱う。 ●
collection ○ 複数のデータの集合。ソートや集計等を扱う。 ● view ○ ロジックがあり再利用可能なUIの小片。 ● router ○ urlと関数の関連付けを行う。 ● template ○ htmlの小片。
6.
これから よくあるToDOアプリを作ります そして、 単に書くだけでは面白くないので....
7.
Parse使う
8.
Parseとは BaaS(Backend as a
Service):クラウドサービス ● 要するに以下をやってくれる ○ Backend側プログラム ■ Restに沿って独自APIを事前に準備 ● ※今迄rails等で書いていた物がParse側で準備されている ○ storage ■ 非公式だがcouchDBという噂が。 ● ※今迄mySQL等構築していた物がParse側で準備されてる ○ 今は、色々出来る事が増えてるみたい ■ 認証?/analytics?/push通信? ■ 最近hostingも始まった。
9.
つまり 開発者はClient側だけ作れば良い ○ Web :
front側だけ ○ スマホ : native側だけ ● 色んなシチュエーションで使えそう ○ ○ ○ ○ 開発者いないけどDBにデータ入れたい 個人開発スマホアプリで気軽にdata保存したい とりあえずモック作りたい 勿論、実際の製品に使ってる例も沢山有り
10.
イメージ 注意:構成は非公開なのでimage Rest API CRUD操作等 json Client Web/App Server NoSQL っぽい何か
11.
事例 ● 山のようにある ○ スマホアプリで多く使われている ○
日本でも事例ちらほら。
12.
ちなみに Facebookに買収されたらしい(2013/4月末) ● とっても未来のあるサービス
13.
Client 沢山ある。 ● iOS版 ● Android版 ●
.NET版 ● javascript版 ★これからこれを使う★ ○ Backbone.jsベース(古いBackboneのfork) ■ 少しだけ記述が違う ● ● ● Backbone.Model => Parse.Object Backbone.Collection => Parse.Collection Backbone.View => Parse.View ● 基本的にBackboneをParseにすれば良いが、Modelだけ Objectになってる点、注意。
14.
sample手順 1. ユーザー登録 ○ sign
upでメアド登録 2. Dashboardでアプリ作成(create New App) 3. QuickStartGuide をclick ○ ①javascript選択 ○ ②new project選択 ○ ③Blank〜Parse SDK(zip)をdownload 4. 解凍後index.htmlのParse.initializeを置換 これでコピペ 5. index.htmlをbrowser確認 ○ We’ve also just created...=>成功
15.
index.html見てみる ● 以下を保存 ○ TestObject(Excelシート/tableみたいな物) ○
foo : bar (列と値/カラムと値みたいな物) Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY"); var TestObject = Parse.Object.extend("TestObject"); var testObject = new TestObject(); testObject.save({foo: "bar"}, { success: function(object) { $(".success").show(); }, error: function(model, error) { $(".error").show(); } });
16.
index.htmlのhead見てみる ● parse-x.x.x.min.jsを呼んでる ○ Backboneをwrapしたjsファイル ○
storageのsync先がParseになってる <script type="text/javascript" src="http://ajax.googleapis. com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.parsecdn. com/js/parse-1.2.12.min.js"></script>
17.
ついでに dev tool見てみると ※送信時に ● api.parse.comと通信 ●
jsonが返ってきてる
18.
データオブジェクト Parse.comのdashboardでdataを確認できる
19.
ToDoApps 今日作るToDoアプリの構成 ● サーバー/ストレージ ○ ToDoのCRUD ■
Parseに記録 ● クライアント ○ 表示/Event ■ Backbone.jsを使う ● ● 但し本物のBackbone.jsではなく Parse-x-x-x.min.jsでwrapされたもの(少しだけ仕様違う)
20.
tutorial 1. 2. 3. 4. ● HTML準備 Model作成 Collection作成 View作成 先程のsampleのindex.htmlをベースに ○ ※実際はそれぞれfileを分けるが今日は1fileで
21.
HTML準備 10行付近jQuery前:underscore.jsを追加 <script type="text/javascript" src="http://underscorejs.org/underscore.js" ></script> 20行付近div#main:中身を削除。以下上書。 <div
id="main"> <form id="todo-form"> <input type="text" id="title"/> <input type="submit"/> </form> <div id="error"></div> <div id="todo-list"> <ul></ul> </div> </div> フォーム バリデーション 表示領域 <span class='help' style="display:none;">text入れて送信するだけね<a href='#'>戻る</a></span>
22.
キーを指定 ● scriptタグ内はParse.initialize以外削除 ○ ※APP_ID/JS_KEYは先程のをそのまま使って <script
type="text/javascript"> Parse.initialize("APP_ID", "JS_KEY"); // ここに以降、追加していきます </script>
23.
Model作成 ● Parse.Object(=Backbone.model) ○ 特にschema定義不要(schemaless) ○
validation:値の検証 ■ 今回:空白をcheck! var Todo = Parse.Object.extend({ className:"Todo", validate: function(attrs){ if(_.isEmpty(attrs.title)){ return "please write text!"; } } });
24.
Collection作成 ● Parse.Collection(=Backbone.Collection) ○ Todoモデルを束ねる ○
ソート等書く var TodoList = Parse.Collection.extend({ model: Todo });
25.
今回のView構成 ● 結果表示 ○ ①TodoView
: Todoの1つ(liの中) ○ ②TodoListView : 複数のTodoの一覧(ul) ● フォーム ○ ③TodoFormView : 送信をcheck ● 全体 ○ ④AppView : 初期処理 ■ 各View準備 ■ Parseからdata読取 ③ ① ②
26.
View作成(①:1つのtodo) ● Parse.View(=Backbone.View) ○ ○ ○ ○ tagName: このViewを囲うtag template
: htmlのテンプレート(後述) render : 描写処理を書く関数 el : 対象要素 var TodoView = Parse.View.extend({ tagName: "li", template: _.template($('#todo-template').html()), render: function(){ this.$el.html(this.template(this.model.toJSON())); return this; } });
27.
View作成 : template ●
templateは、scriptタグで外に出せる(後述) ○ 先程のtemplateから呼び出している ○ jsp等と同じように変数を埋め込める(title) ● このtemplateを①のViewが描写している <script type="text/template" id="todo-template"> <strong>[TODO]</strong> <span><%- title %></span> </script>
28.
View作成(②:複数のtodo) ● Parse.View(Backbone.View.extend) ○ el
: 対象要素(どこに描写するか指定) ○ initialize : 初期処理 ■ collectionにadd var TodoListView = Parse.View.extend({ el: "#todo-list > ul", ■ =>render initialize: function(){ ○ render:描写処理 this.collection.on("add", this.render, this); }, ■ collectionループ render: function() { ■ 自分の要素内に this.$el.html(""); this.collection.each(function(todo) { ■ ①のViewを描写 var todoView = new TodoView({model:todo}); this.$el.append(todoView.render().el); },this); return this; } });
29.
View作成(③:フォーム) ● Parse.View(Backbone.View.extend) ○ events
: イベント ■ submitあったら、 ■ createTodo関数を実行 ○ createTodo : オリジナル関数 ■ inputタグからTodoを作成 ■ error時は#errorにmessage ● 先程のvalidationここで表示 ■ validationで問題なければ ● ● Todoを保存 成功したらcollectionに追加 var TodoFormView = Parse.View.extend({ el: "#todo-form", events: { "submit": "createTodo" }, createTodo: function(e) { e.preventDefault(); var todo = new Todo(); todo.on('error', function(model, error) {$('#error').html(error);}); todo.set({title : $('#title').val()}) if(todo.isValid()) { $('#error').html(''); todo.save(null, { success: _.bind(function(todo) { this.collection.add(todo); $('#title').val(''); }, this) }); }; } });
30.
View作成(④:アプリ全体) ● 初期処理 ○ Parse.Query(class名).findでParseから一覧取得 ○
各View(②list③form)を初期化して準備 ■ ②listは、Parseのdataを表示 var AppView = Parse.View.extend({ initialize: function(){ new Parse.Query("Todo").find({ success: _.bind(function(list){ var todoList = new TodoList(list); var todoFormView = new TodoFormView({collection: todoList}); this.todoListView = new TodoListView({collection: todoList}); this.render(); }, this) }); }, render: function(){ this.todoListView.render(); return this; } });
31.
Router作成 ● Parse.Router(=Backbone.Router) ○ initialize ■
④初期View準備 ○ routes:URLと関数を紐付け ■ URL:#help(アンカー) ■ help関数実行 ● help用のhtml表示 ○ raisのconfig/routes.rb的な物 ○ history.start ■ routeのdispatchを開始 var TodoRouter = Parse.Router.extend({ initialize: function(){ var appView = new AppView(); }, routes: { "help" : "help", "" : "show" }, help : function() { $('#main').hide(); $("span.help").show(); }, show : function() { $("span.help").hide(); $('#main').show(); } }); var todoRouter = new TodoRouter; Parse.history.start();
32.
これで終わり 動いてる? ● 動かない人=>githubに上げておいた
33.
ソースを見ると ● 全体 ○ データ(M)と表示処理(V)が分かれている ■
データに対してのロジックなのか、画面描写に関して の処理なのか明確に ○ Viewも1画面の中でUIの構成要素毎に分かれている ■ DOMのEventがごちゃごちゃしない。 少し長いソースになったけど、 何やってるかは分かり易いソースになった。
34.
Modelについて ● 特にスキーマを定義しない ● 1つと複数とをmodel/collectionで分ける ○
例)Twitterで言うと ■ userがmodel ■ follower/followがcollection ● 実際Backboneを使う時はurlを指定してREST のルールに従ってデータを送受信
35.
Viewについて 普通のバックエンドのViewと少し違う ● BackboneのView=表示用のlogicを含む。 ○ rails等backendのView
= erb/jsp等templateだが ● Viewのソースを見ると ○ DOMとEventの紐付きが分かり易い ○ 画面描写何してるかはrender見れば何となく分かる ○ よくある文字リテラルによるhtml作成でなく、template使 うのでどんな画面になるかimageし易い
36.
router urlのアンカーに対応して関数実行 ● 別画面、tab、popup等用途色々ありそう ● single
page application用途 # #help
37.
基本構成をもう一度 Router HTTP Request model更新 Collection Models View modelイベント html描写 syncs DOM イベント Template Data Source (ex:DB/API) サーバー側
38.
おしまい
Baixar agora