狠狠撸

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(){
console.log(“hoge");
});
3. TodoAppManager.start();

リージョンの追加
2. TodoAppManager.addRegions({
3. mainRegion:”#main-region”
4. });
console.log(“hoge");
});

Regionのいいところ
? Closeなどを使わなくても、ちゃんと
destroyしてくれる

テンプレートを使って表示
3. mainRegion:"#main-region"
4. });
5. TodoAppManager.StaticView =
Backbone.Marionette.ItemView.extend({
6. template:"#static-text"
7. });
9. var static_view = new TodoAppManager.StaticView();
10. TodoAppManager.mainRegion.show(static_view);
11. });

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

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("t
odo:TodoModel",function(){

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

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

Module名の統一
? Module名を統一すると、同じ1体の
moduleとして扱ってくれる

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

罢翱顿翱リストの追加

現状の問題点
? Regionの中にフォームがない
? Listのビューの中に、フォームのイベント
を書くのはおかしい
? 搁别驳颈辞苍の追加をする

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

狠狠撸

Marionettejs getting started

More Related Content

Marionettejs getting started