Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

1,021 views

Published on

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

Published in: Technology
  • Be the first to comment

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. });

×