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

1. Marionette.js
はじめの一歩
Kyohei Morimoto

2. Agenda
• 開発環境を整える
• 固定のテキストを表示させる
• Marionetteの基本
• Todoリストのリストを作ってみる
• 完成:Todoを追加出来るようにする

3. 開発環境を整える
• Gitからクローンしてきてね
• https://github.com/basara669/marion
ettejs_gettingStarted

4. ファイルの説明
• assetsフォルダ：jsやCSSが入っている
• assets/js/vender:外部ライブラリ

5. 完成ファイルの確認
• 完成ファイルのindex.html参照
• 引っ越しの時間も迫っているので、下記
機能だけ実装します
– Todoリストの表示
– Todoリストの削除
– Todoリストの追加
※Toggleとか作りません

6. VIEWを使ってみる
固定テキストの表示

7. アプリケーションの開始
1. var TodoAppManager = new Marionette.Application();
2. TodoAppManager.on("initialize:after", function(){
console.log(“hoge");
});
3. TodoAppManager.start();

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. Regionのいいところ
• Closeなどを使わなくても、ちゃんと
destroyしてくれる

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. TODOのリスト表示
固定テキストの表示

12. 時間の都合上、
ここからレベル上がります…

13. 手順
• テンプレートの作成
• app.jsの作成
• Modelの作成
• リストのViewの作成
• リストのControllerの

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. 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. 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. Moduleの作り方
App.module('MyModule', function(MyModule, App,
Backbone, Marionette, $, _) {
//・・・
});
サブモジュールも作れる
App.module('ParentModule.ChildModule.MyModule',
function(MyModule, App, Backbone, Marionette, $, _) {
//・・・
});

18. Modelへのアクセスの定義
• TodoAppManager.reqres.setHandler("t
odo:TodoModel",function(){

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. 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. Module名の統一
• Module名を統一すると、同じ1体の
moduleとして扱ってくれる

22. Modelへリクエスト
• var todos =
TodoAppManager.request("todo:Todo
Model");

23. TODOリストの追加

24. 現状の問題点
• Regionの中にフォームがない
• Listのビューの中に、フォームのイベント
を書くのはおかしい
• Regionの追加をする

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