Marionette.js
はじめの一歩
Kyohei Morimoto
Agenda
• 開発環境を整える
• 固定のテキストを表示させる
• Marionetteの基本
• Todoリストのリストを作ってみる
• 完成:Todoを追加出来るようにする
開発環境を整える
• Gitからクローンしてきてね
• https://github.com/basara669/marion
ettejs_gettingStarted
ファイルの説明
• assetsフォルダ:jsやCSSが入っている
• assets/js/vender:外部ライブラリ
完成ファイルの確認
• 完成ファイルのindex.html参照
• 引っ越しの時間も迫っているので、下記
機能だけ実装します
– Todoリストの表示
– Todoリストの削除
– Todoリストの追加
※Toggleとか作りません
VIEWを使ってみる
固定テキストの表示
アプリケーションの開始
1. var TodoAppManager = new Marionette.Application();
2. TodoAppManager.on("initialize:after", function(){
con...
リージョンの追加
1. var TodoAppManager = new Marionette.Application();
2. TodoAppManager.addRegions({
3. mainRegion:”#main-region”...
Regionのいいところ
• Closeなどを使わなくても、ちゃんと
destroyしてくれる
テンプレートを使って表示
1. var TodoAppManager = new Marionette.Application();
2. TodoAppManager.addRegions({
3. mainRegion:"#main-reg...
TODOのリスト表示
固定テキストの表示
時間の都合上、
ここからレベル上がります…
手順
• テンプレートの作成
• app.jsの作成
• Modelの作成
• リストのViewの作成
• リストのControllerの
Index.html
1. <script type="text/template" id="task-template">
2. <%- title %>
3. <span class="btn btn-sm btn-default js-
...
todo_model.js_前半
1. TodoAppManager.module('TodoModel',function(TodoModel,
TodoAppManager,Backbone,Marionette, $ ,_){
2. To...
todo_model.js_前半
1. var API = {
2. getTodos:function(){
3. if(todos === undefined){
4. initializeTodos();
5. }
6. return t...
Moduleの作り方
App.module('MyModule', function(MyModule, App,
Backbone, Marionette, $, _) {
//・・・
});
サブモジュールも作れる
App.module('...
Modelへのアクセスの定義
• TodoAppManager.reqres.setHandler("t
odo:TodoModel",function(){
list_view.js
1. TodoAppManager.module("TodoApp.List",function(List,TodoAppManager,Back
bone,Marionette,$,_){
2. List.TodoI...
list_controller.js
1. TodoAppManager.module("TodoApp.List",function(List,TodoAppMan
ager,Backbone,Marionette,$,_){
2. List...
Module名の統一
• Module名を統一すると、同じ1体の
moduleとして扱ってくれる
Modelへリクエスト
• var todos =
TodoAppManager.request("todo:Todo
Model");
TODOリストの追加
現状の問題点
• Regionの中にフォームがない
• Listのビューの中に、フォームのイベント
を書くのはおかしい
• Regionの追加をする
Index.html
1. <div id="add-region" class="container"></div>
2. <div id="main-region" class="container">
3. <p>何かが間違っている…(´...
App.js
1. var TodoAppManager = new Marionette.Application();
2. TodoAppManager.addRegions({
3. mainRegion:"#main-region",
...
add_view.js
1. TodoAppManager.module("TodoApp.Add",function(Add,TodoAppManag
er,Backbone,Marionette,$,_){
2. Add.AddTodoVi...
Upcoming SlideShare
Loading in …5
×

Marionettejs getting started

543
-1

Published on

とある勉強会で使った、基本なtodoアプリを作りながらMarionette.jsの基本的な部分を学べる資料です。
https://github.com/basara669/marionettejs_gettingStarted

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
543
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Marionettejs getting started

  1. 1. Marionette.js はじめの一歩 Kyohei Morimoto
  2. 2. Agenda • 開発環境を整える • 固定のテキストを表示させる • Marionetteの基本 • Todoリストのリストを作ってみる • 完成:Todoを追加出来るようにする
  3. 3. 開発環境を整える • Gitからクローンしてきてね • https://github.com/basara669/marion ettejs_gettingStarted
  4. 4. ファイルの説明 • assetsフォルダ:jsやCSSが入っている • assets/js/vender:外部ライブラリ
  5. 5. 完成ファイルの確認 • 完成ファイルのindex.html参照 • 引っ越しの時間も迫っているので、下記 機能だけ実装します – Todoリストの表示 – Todoリストの削除 – Todoリストの追加 ※Toggleとか作りません
  6. 6. VIEWを使ってみる 固定テキストの表示
  7. 7. アプリケーションの開始 1. var TodoAppManager = new Marionette.Application(); 2. TodoAppManager.on("initialize:after", function(){ console.log(“hoge"); }); 3. TodoAppManager.start();
  8. 8. リージョンの追加 1. var TodoAppManager = new Marionette.Application(); 2. TodoAppManager.addRegions({ 3. mainRegion:”#main-region” 4. }); 5. TodoAppManager.on("initialize:after", function(){ console.log(“hoge"); }); 6. TodoAppManager.start();
  9. 9. Regionのいいところ • Closeなどを使わなくても、ちゃんと destroyしてくれる
  10. 10. テンプレートを使って表示 1. var TodoAppManager = new Marionette.Application(); 2. TodoAppManager.addRegions({ 3. mainRegion:"#main-region" 4. }); 5. TodoAppManager.StaticView = Backbone.Marionette.ItemView.extend({ 6. template:"#static-text" 7. }); 8. TodoAppManager.on("initialize:after", function(){ 9. var static_view = new TodoAppManager.StaticView(); 10. TodoAppManager.mainRegion.show(static_view); 11. }); 12. TodoAppManager.start();
  11. 11. TODOのリスト表示 固定テキストの表示
  12. 12. 時間の都合上、 ここからレベル上がります…
  13. 13. 手順 • テンプレートの作成 • app.jsの作成 • Modelの作成 • リストのViewの作成 • リストのControllerの
  14. 14. Index.html 1. <script type="text/template" id="task-template"> 2. <%- title %> 3. <span class="btn btn-sm btn-default js- delete">delete</span> 4. </script>
  15. 15. todo_model.js_前半 1. TodoAppManager.module('TodoModel',function(TodoModel, TodoAppManager,Backbone,Marionette, $ ,_){ 2. TodoModel.Todo = Backbone.Model.extend({}); 3. TodoModel.TodoCollection = Backbone.Collection.extend({ 4. model:TodoModel.Todo 5. }); 6. var todos; 7. var initializeTodos = function(){ 8. todos = new TodoModel.TodoCollection([ 9. { 10. title:"task1", 11. completed:true 12. }, 13. { 14. title:"task2", 15. completed:false 16. }, 17. { 18. title:"task3", 19. completed:false 20. } 21. ]); 22. };
  16. 16. todo_model.js_前半 1. var API = { 2. getTodos:function(){ 3. if(todos === undefined){ 4. initializeTodos(); 5. } 6. return todos; 7. } 8. }; 9. TodoAppManager.reqres.setHandler("todo:TodoModel",function(){ 10. return API.getTodos(); 11. }); 12. });
  17. 17. Moduleの作り方 App.module('MyModule', function(MyModule, App, Backbone, Marionette, $, _) { //・・・ }); サブモジュールも作れる App.module('ParentModule.ChildModule.MyModule', function(MyModule, App, Backbone, Marionette, $, _) { //・・・ });
  18. 18. Modelへのアクセスの定義 • TodoAppManager.reqres.setHandler("t odo:TodoModel",function(){
  19. 19. list_view.js 1. TodoAppManager.module("TodoApp.List",function(List,TodoAppManager,Back bone,Marionette,$,_){ 2. List.TodoItemView = Marionette.ItemView.extend({ 3. tagName:"li", 4. template:"#task-template", 5. events:{ 6. "click .js-delete":"deleteClicked" 7. }, 8. deleteClicked:function(e){ 9. e.stopPropagation(); 10. //これでも動く↓ 11. // this.model.collection.remove(this.model); 12. this.trigger("todo:delete",this.model); 13. } 14. }); 15. List.TodosView = Marionette.CollectionView.extend({ 16. tagName:"ul", 17. itemView :List.TodoItemView 18. }); 19. });
  20. 20. list_controller.js 1. TodoAppManager.module("TodoApp.List",function(List,TodoAppMan ager,Backbone,Marionette,$,_){ 2. List.Controller = { 3. listTodos : function(){ 4. var todos = TodoAppManager.request("todo:TodoModel"); 5. var todosView = new List.TodosView({ 6. collection:todos 7. }); 8. todosView.on("itemview:todo:delete", function(childView,model){ 9. todos.remove(model); 10. }); 11. TodoAppManager.mainRegion.show(todosView); 12. } 13. } 14. });
  21. 21. Module名の統一 • Module名を統一すると、同じ1体の moduleとして扱ってくれる
  22. 22. Modelへリクエスト • var todos = TodoAppManager.request("todo:Todo Model");
  23. 23. TODOリストの追加
  24. 24. 現状の問題点 • Regionの中にフォームがない • Listのビューの中に、フォームのイベント を書くのはおかしい • Regionの追加をする
  25. 25. Index.html 1. <div id="add-region" class="container"></div> 2. <div id="main-region" class="container"> 3. <p>何かが間違っている…(´・ω・`)</p> 4. </div> 5. <script type="text/template" id="task-template"> 6. <%- title %> 7. <span class="btn btn-sm btn-default js-delete">delete</span> 8. </script> 9. <script type="text/template" id="add-template"> 10. <form action="" id="addTask" class="form-inline"> 11. <input type="text" id="title" class="form-control"> 12. <input type="submit" value="add" class="btn btn- primary"> 13. </form> 14. </script>
  26. 26. App.js 1. var TodoAppManager = new Marionette.Application(); 2. TodoAppManager.addRegions({ 3. mainRegion:"#main-region", 4. addRegion:"#add-region" 5. }); 6. TodoAppManager.on("initialize:after",function(){ 7. TodoAppManager.TodoApp.List.Controller.listTodos(); 8. });
  27. 27. add_view.js 1. TodoAppManager.module("TodoApp.Add",function(Add,TodoAppManag er,Backbone,Marionette,$,_){ 2. Add.AddTodoView = Marionette.ItemView.extend({ 3. template:"#add-template", 4. events:{ 5. 'submit':'submit' 6. }, 7. submit:function(e){ 8. e.preventDefault(); 9. var todos = TodoAppManager.request("todo:TodoModel"); 10. todos.add({title:$('#title').val()}); 11. } 12. }); 13. var addTodoView = new Add.AddTodoView({}); 14. TodoAppManager.addRegion.show(addTodoView); 15. });
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×