Wzorzec MVC w JavaScript

download Wzorzec MVC w JavaScript

of 38

  • date post

    15-Jan-2015
  • Category

    Technology

  • view

    14.388
  • download

    0

Embed Size (px)

description

Prezentacja na temat wzorca Smalltalk MVC w JavaScript.

Transcript of Wzorzec MVC w JavaScript

  • 1. MVC

2. ModelViewController 3. MV*? 4. Backbone.js 5. Ember.js 6. i tak dalej 7. http://todomvc.com/ 8. Smalltalk MVC 9. widok odpowiada za UI (wdomyle - DOM) 10. var view = function(model, controller) {// widok wie o kontrolerze i modelu}; 11. model reprezentuje warstwdanych - np. item w TodoLicie lub ca list TODO 12. var model = function() {var data = {title: "foobar"};// model nie wie o kontrolerze i widoku}; 13. kontroler decyduje oprzepywie danych w aplikacji 14. var controller = function(model) {return {setNewTitle : function(val) {}};}; 15. sterowanie odbywa si poprzez kontroler (wzorzec Strategy) 16. widok wydaje komunikaty dla modelu przez kontroler 17. var view = function(model, controller) {controller.setNewTitle($("input.title").val());}; 18. widok obserwuje zmiany wmodelu 19. widok wie o zmianach wmodelu dziki implementacji wzorca Observer w modelu 20. jednym sowem majcreferencj do modelu moemy nasuchiwa na zdarzenia,ktre on emituje 21. var view = function(model, controller) {model.addEventListener("updated", function() {console.log("cos sie zmienilo w modelu");});}; 22. widok moe mie podwidoki (wzorzec Composite) 23. widok korzysta z danych modelu 24. var view = function(model, controller) {var items = model.getItems();}; 25. widok tworzy lub dostajekontroler 26. var view = function(model, controller) {var controller = controller || makeMyController();}; 27. model musi udostpnia co w rodzaju addEventListener 28. np. w ten sposb:var model = function() {var data = {title: "foobar"}; return { addEventListener : function() {//... } };}; 29. jak widok daje zna, e cosizmienio i naley uaktualni dane w modelu? 30. var view = function(model, controller) {controller.setNewTitle($("input.title").val());};var controller = function(model) {return {setNewTitle : function(val) { if (val !== "") { model.set("title", val); } else { throw new Error("validation error"); }}};}; 31. w uproszczeniu... 32. var view = function(model, controller) {controller.setNewTitle($("input.title").val());model.addEventListener("title:changed", function(data) {$("input.title").val(data.value);});};var model = function() {var data = {title: "foobar"},observer = makeObserver();return {set: function(key, val) { data[key] = val; observer.trigger(key + ":changed");},addEventListener: observer.addEventListener};};var controller = function(model) {return {setNewTitle : function(val) { if (val !== "") { model.set("title", val); } else { throw new Error("validation error"); }}};}; 33. krok po kroku w przypadku TODO List 34. 1. umoliwiamy dodanienowego itemu TODO w widoku- np. nasuchujc na kliknicieprzycisku dodaj 35. 1. dodajemy item TODO wwidoku2. widok przekazuje nazw (np.zrb zakupy) tego itemu dokontrolera 36. 1. dodajemy item TODO w widoku2. widok przekazuje nazw tego itemu dokontrolera3. kontroler sprawdza, czy dana wartojest poprawna i tworzy model itemu(itemModel) po czym dodaje go do listylistModel 37. 1. dodajemy item TODO w widoku2. widok przekazuje nazw tego itemu dokontrolera3. kontroler sprawdza, czy dana wartojest poprawna i tworzy model itemu(itemModel) po czym dodaje go do listylistModel4. Model listModel dodaje nowy item iemituje zdarzenie itemAdded 38. 1. dodajemy item TODO w widoku2. widok przekazuje nazw tego itemu do kontrolera3. kontroler sprawdza, czy dana warto jest poprawna i tworzymodel itemu (itemModel) po czym dodaje go do listy listModel4. Model listModel dodaje nowy item i emituje zdarzenieitemAdded5. widok odpowiedzialny za wywietlanie listy itemwnasuchuje na zdarzenie itemAdded i odpowiednio reagujeczyszczc dotychczasow list itemw i aktualizujc j o dane zlistModel - np. var items = listModel.getItems();