Embed Size (px)
Citation preview
Marionette.jsはじめの一歩
Kyohei Morimoto
Agenda
• 開発環境を整える
• 固定のテキストを表示させる
• Marionetteの基本
• Todoリストのリストを作ってみる
• 完成:Todoを追加出来るようにする
開発環境を整える
• Gitからクローンしてきてね
• https://github.com/basara669/marionettejs_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(){console.log(“hoge");});
3. TodoAppManager.start();
リージョンの追加
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();
Regionのいいところ
• Closeなどを使わなくても、ちゃんとdestroyしてくれる
テンプレートを使って表示
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();
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-delete">delete</span>
4. </script>
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.Todo5. });6. var todos;7. var initializeTodos = function(){8. todos = new TodoModel.TodoCollection([9. {10. title:"task1",11. completed:true12. },13. {14. title:"task2",15. completed:false16. },17. {18. title:"task3",19. completed:false20. }21. ]);22. };
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. });
Moduleの作り方
App.module('MyModule', function(MyModule, App, Backbone, Marionette, $, _) {
//・・・});
サブモジュールも作れる
App.module('ParentModule.ChildModule.MyModule', function(MyModule, App, Backbone, Marionette, $, _) {
//・・・});
Modelへのアクセスの定義
• TodoAppManager.reqres.setHandler("todo:TodoModel",function(){
list_view.js
1. TodoAppManager.module("TodoApp.List",function(List,TodoAppManager,Backbone,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.TodoItemView18. });
19. });
list_controller.js
1. TodoAppManager.module("TodoApp.List",function(List,TodoAppManager,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. });
Module名の統一
• Module名を統一すると、同じ1体のmoduleとして扱ってくれる
Modelへリクエスト
• var todos = TodoAppManager.request("todo:TodoModel");
TODOリストの追加
現状の問題点
• Regionの中にフォームがない
• Listのビューの中に、フォームのイベントを書くのはおかしい
• Regionの追加をする
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>
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. });
add_view.js
1. TodoAppManager.module("TodoApp.Add",function(Add,TodoAppManager,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. });
