Enviar pesquisa
Carregar
introduction to Marionette.js (jscafe14)
•
56 gostaram
•
28,415 visualizações
Ryuma Tsukano
Seguir
Marionette.jsの概要
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 52
Baixar agora
Baixar para ler offline
Recomendados
公式page改ざんで学ぶjQuery入門 (jscafe7)
公式page改ざんで学ぶjQuery入門 (jscafe7)
Ryuma Tsukano
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
20110714 j queryベーシック
20110714 j queryベーシック
良太 増子
Angular js or_backbonejs
Angular js or_backbonejs
Omasa Yusaku
WebGL and Three.js
WebGL and Three.js
yomotsu
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
Mais conteúdo relacionado
Mais procurados
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
最低限知っておきたい Webセキュリティーについて@MT関西
最低限知っておきたい Webセキュリティーについて@MT関西
Masayuki Abe
Backbone.js入門
Backbone.js入門
AdvancedTechNight
JavaScriptことはじめ
JavaScriptことはじめ
Yuki Ishikawa
Backbone.js
Backbone.js
daisuke shimizu
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
画像を縮小するお話
画像を縮小するお話
technocat
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Makoto Haruyama
Kawaz的jQuery入門
Kawaz的jQuery入門
Kohki Miki
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
Start React with Browserify
Start React with Browserify
Muyuu Fujita
iPhoneアプリ開発入門(1)ボタンと画像
iPhoneアプリ開発入門(1)ボタンと画像
Toshio Ehara
覚醒!JavaScript
覚醒!JavaScript
Haraguchi Go
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
leverages_event
Creators'night#12今井
Creators'night#12今井
Daisuke Imai
よこへな3 15発表資料 最近ViewController をどんな感じで書いているか
よこへな3 15発表資料 最近ViewController をどんな感じで書いているか
Yuichiro Suzuki
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
Atsushi Tadokoro
WordPressと外部APIとの連携
WordPressと外部APIとの連携
Hidekazu Ishikawa
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
WordPressで提供するWeb API
WordPressで提供するWeb API
Yuko Toriyama
Mais procurados
(20)
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
最低限知っておきたい Webセキュリティーについて@MT関西
最低限知っておきたい Webセキュリティーについて@MT関西
Backbone.js入門
Backbone.js入門
JavaScriptことはじめ
JavaScriptことはじめ
Backbone.js
Backbone.js
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
画像を縮小するお話
画像を縮小するお話
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Kawaz的jQuery入門
Kawaz的jQuery入門
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Start React with Browserify
Start React with Browserify
iPhoneアプリ開発入門(1)ボタンと画像
iPhoneアプリ開発入門(1)ボタンと画像
覚醒!JavaScript
覚醒!JavaScript
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
Creators'night#12今井
Creators'night#12今井
よこへな3 15発表資料 最近ViewController をどんな感じで書いているか
よこへな3 15発表資料 最近ViewController をどんな感じで書いているか
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
WordPressと外部APIとの連携
WordPressと外部APIとの連携
2時間で学ぶjQuery
2時間で学ぶjQuery
WordPressで提供するWeb API
WordPressで提供するWeb API
Destaque
Backbone/Marionette introduction
Backbone/Marionette introduction
matt-briggs
Marionette: the Backbone framework
Marionette: the Backbone framework
frontendne
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
Takuya Ueda
Marionette - TorontoJS
Marionette - TorontoJS
matt-briggs
Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)
Ryuma Tsukano
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
Ryuma Tsukano
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Artyom Trityak
Backgrid - A Backbone Plugin
Backgrid - A Backbone Plugin
Neerav Mittal
JavaScript: Past, Present, Future
JavaScript: Past, Present, Future
Jungryul Choi
Workshop 7: Single Page Applications
Workshop 7: Single Page Applications
Visual Engineering
AngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.js
Mark
Backbone And Marionette : Take Over The World
Backbone And Marionette : Take Over The World
harshit040591
Introduction à Marionette
Introduction à Marionette
Raphaël Lemaire
Intro to Backbone.js by Azat Mardanov for General Assembly
Intro to Backbone.js by Azat Mardanov for General Assembly
Azat Mardanov
Backbone.js
Backbone.js
Knoldus Inc.
Introduction to Backbone.js
Introduction to Backbone.js
Jonathan Weiss
Introduction to Backbone.js
Introduction to Backbone.js
Roman Kalyakin
MVC & backbone.js
MVC & backbone.js
Mohammed Arif
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Mikko Ohtamaa
Destaque
(20)
Backbone/Marionette introduction
Backbone/Marionette introduction
Marionette: the Backbone framework
Marionette: the Backbone framework
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
Marionette - TorontoJS
Marionette - TorontoJS
Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Backgrid - A Backbone Plugin
Backgrid - A Backbone Plugin
JavaScript: Past, Present, Future
JavaScript: Past, Present, Future
Workshop 7: Single Page Applications
Workshop 7: Single Page Applications
AngularJS vs. Ember.js vs. Backbone.js
AngularJS vs. Ember.js vs. Backbone.js
Backbone And Marionette : Take Over The World
Backbone And Marionette : Take Over The World
Introduction à Marionette
Introduction à Marionette
Intro to Backbone.js by Azat Mardanov for General Assembly
Intro to Backbone.js by Azat Mardanov for General Assembly
Backbone.js
Backbone.js
Introduction to Backbone.js
Introduction to Backbone.js
Introduction to Backbone.js
Introduction to Backbone.js
MVC & backbone.js
MVC & backbone.js
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Semelhante a introduction to Marionette.js (jscafe14)
Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
Ryuma Tsukano
教育現場のニーズが生んだユーザーエクスペリエンス
教育現場のニーズが生んだユーザーエクスペリエンス
株式会社 オープンソース・ワークショップ
Asp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソ
Yoshitaka Seo
Introduction for Browser Side MVC
Introduction for Browser Side MVC
Ryunosuke SATO
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
Sasaki Minoru
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
Mami Shiino
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
Yoshitaka Seo
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ
Akira Hatsune
Mvpvm pattern
Mvpvm pattern
Mami Shiino
ゲームエンジンとMVC
ゲームエンジンとMVC
AimingStudy
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
LightSwitch で遊んでみた Rev. 2
LightSwitch で遊んでみた Rev. 2
Yoshitaka Seo
Reactnative はじめの一歩
Reactnative はじめの一歩
PIXTA Inc.
Djangoのススメ
Djangoのススメ
Alisue Lambda
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
Tomoharu ASAMI
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
増田 亨
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hack
kimukou_26 Kimukou
I phoneアプリ入門 第3回
I phoneアプリ入門 第3回
Sachiko Kajishima
UICollectionViewLayoutでカバーフローを作りたい!
UICollectionViewLayoutでカバーフローを作りたい!
sawat1203
Semelhante a introduction to Marionette.js (jscafe14)
(20)
Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
教育現場のニーズが生んだユーザーエクスペリエンス
教育現場のニーズが生んだユーザーエクスペリエンス
Asp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソ
Introduction for Browser Side MVC
Introduction for Browser Side MVC
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ
Mvpvm pattern
Mvpvm pattern
ゲームエンジンとMVC
ゲームエンジンとMVC
Head First XML Layout on Android
Head First XML Layout on Android
LightSwitch で遊んでみた Rev. 2
LightSwitch で遊んでみた Rev. 2
Reactnative はじめの一歩
Reactnative はじめの一歩
Djangoのススメ
Djangoのススメ
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hack
I phoneアプリ入門 第3回
I phoneアプリ入門 第3回
UICollectionViewLayoutでカバーフローを作りたい!
UICollectionViewLayoutでカバーフローを作りたい!
Último
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
arts yokohama
2024 04 minnanoito
2024 04 minnanoito
arts yokohama
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
Industrial Technology Research Institute (ITRI)(工業技術研究院, 工研院)
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
Matsushita Laboratory
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ssuser539845
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
Sadao Tokuyama
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...
yoshidakids7
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
Tetsuya Nihonmatsu
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
arts yokohama
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
Shumpei Kishi
2024 03 CTEA
2024 03 CTEA
arts yokohama
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
ssuser370dd7
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究 千坂知也
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究 千坂知也
harmonylab
Último
(13)
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
2024 04 minnanoito
2024 04 minnanoito
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...
Summary of "ChatDoctor: A Medical Chat Model Fine-Tuned on a Large Language M...
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
2024 03 CTEA
2024 03 CTEA
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究 千坂知也
【修士論文】代替出勤者の選定業務における依頼順決定方法に関する研究 千坂知也
introduction to Marionette.js (jscafe14)
1.
Introduction to Backbone.Marionette ryuma tsukano jsCafe14
2.
Marionetteとは? Backbone.jsの上に被せたlibrary 1. moduleを役割に応じて綺麗に整理 2. 決まった処理の記述を事前に埋込み
3.
なぜMarionette? Backboneを実際書いてみると色々悩む ● ①自由度が高過ぎ ○ Viewの親子や配置等、人によってバラバラで大変 ●
②用意されたmoduleだけでは足りない ○ 特にViewやRouterが汚れる ● ③同じsourceばかり膨大な量を書くハメに... =>これらを解決するためにMarionette
4.
Marionetteの良い所 ● ①Viewの構成が整理されて分かり易くなる ○ Layout管理(Viewの配置)の仕組みがある ○
どのView使うかでViewの親子階層が明確に ● ②開発作業の効率化 ○ とにかく書く量が半分以下に激減! ○ 量が少ないので、読むのも楽になる! ● ③ソースが汚れない ○ routerとController分けてる! ○ イベント連携の仕組みが整理されてる!
5.
噂:抽象度 噂「抽象度が高すぎなんじゃない?」 => そんなに言う程ではない。simpleだし。 ● 見えないcode
= 今迄何度も書いてた所 ○ 何度も同じ事書きたくないじゃん ○ 不明点はMarionetteのsource読めば良い ■ sourceは量が少なく、Backboneっぽいので、 すぐ 辿れる
6.
抽象度:補足 補足すると、Marionetteは “my way or
highway?”なframework。 ○ ※ Developing Backbone.js Applications より ● 気に入らない所は使わなくてもいい ○ 厳密に全てを使わなくても大丈夫 ○ 一部、生Backbone/生jsを書いてもいい
7.
噂:学習コスト 噂「学習コストかかるからあかんやろ」 =>勿論、0では無いがそこまで大変でない ● Backboneの延長として+αしただけ ○ simpleでそんなに独自ではない。 ○
殆ど、Backboneにextendしてる
8.
学習コストの補足 結局、生のBackboneだけを使ってても ● ゆくゆく共通化するような事 ● (暗黙的/明示的に)現場でルール化する事 =>これらを準備してくれるのがMarionette Marionetteの学習= 現場で同等の独自の仕組み勉強するのと同じ
9.
事例等 ● 海外venture系で実験的に使い始めてる? ○ from
公式wiki事例集 ○ 有名な物は無いが... ● 今年(‘13)7月のBackbone confでも言及有り ○ (1つ目/2つ目)
10.
githubのstar数 ここのサイトでは Backboneplugin中 一番start多いのが =>Marionette ※ちなみに2位のchaplinも 同じ様なframework
11.
情報源 ● 入門 ○ github:Developing
Backbone.js Applications ○ slide: Backbone経緯 / 概念の解説 / 概説 ○ blog : viewを図示した良記事 ● リファレンス ○ github: 公式document / 公式wiki ● tutorial ○ blog : 1,2 / video : 1 / 書籍 : 1 ● example ○ todoMVC / 本棚アプリ?のソース / mailer? ● Marionette自体のboilerplate系 ○ github : boilerplate / yeomanのgenerator
12.
boilerplate系 以下、すぐに始められる!素晴らしい! ● marionetteのboilerplate ● yeomanのgenerator ○
特に後者が素晴らしい。以下の構成がすぐ出来る! ■ Back) Node + Express + Socket.io ■ Storage) Mongoose(mongoDB) ■ Front) Backbone + Marionette + requirejs + Handlebars + SASS-bootstrap ■ Test) phntomjs + Mocha + Chai + Sinon ○ railsみたいな感覚でいきなり開発出来る! ■ 各種generatorも沢山あってかなり助かる!
13.
ソースはこんな感じ ● render書かない ○ modelとのmappingも書かない ○
template呼び出し/cacheも書かない =>量少ないのでパッと見も明快。 =>あくまでBackboneっぽく書いてる。
14.
今から 個別のcomponentの説明をしていきます。 ★おすすめ =>本体のソースを見ながら聞くと、 ある程度納得しながら進めれるかも。 ● 正直に書かれたBackboneのソースなので、割と平易 に読めるかと。 =>本体は[
こちら ]から
15.
Marionetteの全体像 MarionetteがBackboneに追加した事は3つ ● 1)View ● 2)Router ●
3)全体連携 ※量的にも内容的にも1のViewがmain。 後はおまけ
16.
1)viewのまとめ ● A)Viewを拡張 ○ View ○
ItemView ● B)Viewの集合 ○ CollectionItem ○ CompositeItem ● C)レイアウトを管理 ○ Region ○ Layout
17.
1)View A)Viewを拡張
18.
Viewの継承関係 =>先祖になるViewの話から Backbone.View Marionette.View Marionette.ItemView Marionette.CollectionView Marionette.CompositeView Viewの最小単位 ItemViewの集合 ItemViewの集合(template付き)
19.
Marionette.View Marionette全ViewのBase(extend元super class) (Backbone.Viewをextendしていて、内容は主に以下を追加) ● closeメソッド ○
eventのunbind/el削除等 ○ 通常View自体の参照外してもGC対象にならない。 Event等unbindする必要有り=>それやってくれる ● ui ○ よく使うjQuery要素を書いておける仕組み ● templateHelper ○ templateから呼び出せる関数(次のpageで詳細) ※このViewを直接使う事はほぼ無い
20.
Viewのtemplatehelper templateHelper : templateから呼べるfunction 例)公式docより これを view.render()すると、 “I
think that Backbone.Marionette is the coolest” と表示される
21.
Marionette.ItemView Model(Collection)と結びつく1つのview 先程のViewをextendして主に以下を追加 ● renderメソッド定義されてる ○ Model(Collection)を.toJSONでserialize ○
templateを生成(underscore) ○ Renderオブジェクトにtemplateを入れて描写 ○ Marionette本体のソースを読むとよく分かる ○ =>render定義されてるので、自分で書く必要無い ● modelEvents/collectionEvents ○ model/collectionのeventをキャッチする ○ 例)modelEvents : { “change” : “method”} ■ view指定のmodelがchangeしたらmethod実行
22.
ItemViewのソース こんな感じ=>renderの定義とか自分で書かない
23.
1)View B)Viewの集合
24.
ulタグ(=CollectionView) Viewの集合? BackboneのModelの集合=>Collection 同じように、Viewの集合を作ろうという話 例) ● liタグの1つ ○ さっきのItemView ●
ulタグで囲う ○ CollectionView <=これ。 liタグ(=ItemView) liタグ(=ItemView) liタグ(=ItemView)
25.
Marionette.CollectionView ItemViewを束ねるView ● collectionの追加削除Eventもcheck ○ Eventひっかかった際の処理も定義済み ■
追加削除:ItemViewを追加削除renderする ■ reset時:再度renderする ● 同じくrenderも定義済み ○ 指定したcollectionでloopしてItemViewをrender ○ renderしたものはelに格納。これもソース見よう ● Backbone.BabySitterを使ってItemView管理 ○ 柔軟に呼び出せる ○ 例)myCollView.children.findByModel(MyModel)
26.
CollectionViewのソース こんな感じ =>基本はitemViewを指定するだけ
27.
Marionette.CompositeView CollectionViewを継承して以下を追加 ● templateを指定できる ○ ItemViewを囲うための親側のtemplateを作れる ○
appendHtmlメソッド上書きすると追加する場所や内容を 自分で書ける ● render ○ 再帰的にrender出来る ○ explorerのようなTree状のview作れる=>例
28.
ソース例 tableをcompositeで書いた例 http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/ Username FullName taro yamada
taro hanako tanaka hanako
29.
違い CollectionViewとCompositeViewの違い =>ItemViewの包み方 ● CollectionView ○ 単純にtagで囲うLV ○
単純に1階層のItemViewのrenderするだけ ● CompositeView ○ 親側にtemplate指定できる ■ その中に子供のtemplate埋め込める ○ 再起的に子孫のviewのrenderを実行できる
30.
実際の所 ● CopositeViewを使う方が多いかも ○ そんなに単純なViewにならないから ○
template有った方が柔軟 ● それでも、使える所は出来るだけ CollectionView使った方が良い ○ 「あたし、単純なんですー!」って言われると、ソース読 み易いから
31.
Viewの継承関係もう一度 Backbone.View Marionette.View Marionette.ItemView Marionette.CollectionView Marionette.CompositeView Viewの最小単位 ItemViewの集合 ItemViewの集合(template付き)
32.
1)View C)レイアウトを管理
33.
Layoutの親子関係 Layout Region CollectionView CompositeViewItemView ※Regionの中に 子供のLayout入る事がある
34.
LayoutとRegionの関係 使い方の例 ● Layout >
Region > View
35.
Region Viewの表示非表示等の管理 ● 表示/非表示 ○ Region.show(view)で表示(renderを実行) ○
Region.close()で非表示 ● 再表示管理 ○ 再表示時、前の子供のview全部closeさせる
36.
ソースsample show/close書く ● elごちゃごちゃ書かない ○ なぜ書かなくて済むか? ■
=>次のpageのLayout等で場所を指定する
37.
Layout Regionの集合 ● regionsフィールドでregionを登録 ○ regions:
{ Region名: html要素 } ○ 例)regions: { menu: “#side” } ■ id=sideなhtml要素をmenuというRegionで登録 ■ ここでshowするとid=sideにviewのelを描写 ○ 後でaddRegionで追加も出来る ● 実はItemViewをextendしてる ○ ItemViewのようにtemplate指定可能 ○ ItemViewのようにLayout自体をshowできる ○ 例)MyApp.mainRegion.show(new ChildLayout())
38.
Layoutソース ● id=menuの要素にmenuというRegion登録 ● menuにMenuViewを表示する
39.
実際のLayout ● 幾つか見るとLayoutそんなに使われてない? ○ =>後述のApplicationがRegion管理も出来る ●
使い分け ○ 基本 ■ Application > Region > View ○ 画面がいっぱい ■ 個別にLayout > Region > View
40.
2)Router
41.
AppRouter Backbone.routerをextend ● appRoutesにBackboneのroutes書く ○ 書式はBackboneのroutesと一緒 ○
実行する関数=Controllerの関数 ○ router内の関数ではない ● controller属性にcontrollerを指定 ○ controllerは、ただのobject
42.
Controller こんな感じ
43.
3)全体の連携
44.
3)全体の連携 ● 1)Application ● 2)イベントの話 ○
A)command ○ B)Request/response ○ C)Event
45.
Marionette.Application アプリのhub。初期化や調整等。 初期化処理=>アプリ開始 ● addInitializer(function(){ …
}) ○ 初期化処理。例えば... ■ AppRouterのnew、history.startとか実行 ■ 初期画面作成処理 ● start ○ configを元にアプリを開始
46.
Application こんな感じ
47.
Component同士の通信 以下、3種類あり ● Commands ○ 戻り値なし ●
Request/Response ○ 戻り値あり ● Event ○ 元々Marionetteに埋め込まれているEventと連携 =>これがApplicationの中に埋め込まれてる ● ※実体はBackbone.wreqrというplugin
48.
Commands ● 一カ所の処理を実行するだけ ○ ※呼び出しはどこからでも書ける ●
戻り値は無い
49.
Request/Response ● 別のcomponentから情報取得する時使う ○ 戻り値が有る =>これで”RESPONSE
HIT”が返って来る
50.
Events ● Backbone.Eventsをextend ○ 何かが起こった事を伝える時便利 ○
複数の処理を実行したい時に便利
51.
まとめ 良い所 ● ①Viewの構成が整理=>分かり易くなる ● ②開発作業の効率化 ●
③ソースが汚れない コンポーネント ● View ○ ItemView/CollectionView/CompositeView ● Region/Layout ● AppRouter/Controller ● Application ○ Command/Request,Response/Event
52.
おしまい
Baixar agora