Marionettejs getting started

  • View
    958

  • Download
    0

Embed Size (px)

Text of Marionettejs getting started

  • Marionette.js

    Kyohei Morimoto

  • Agenda

    Marionette

    Todo

    :Todo

  • Git

    https://github.com/basara669/marionettejs_gettingStarted

    https://github.com/basara669/marionettejs_gettingStarted

  • assetsjsCSS

    assets/js/vender:

  • index.html

    Todo

    Todo

    TodoToggle

  • 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

    Closedestroy

  • 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.

    2.

    3. delete

    4.

  • 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

    Module1module

  • Model

    var todos = TodoAppManager.request("todo:TodoModel");

  • TODO

  • Region

    List

    Region

  • Index.html

    1.

    2. 3.

    ()

    4.

    5. 6. 7. delete8.

    9. 10. 11. 12. 13. 14.

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