MVC

ModelView

Controller

MV*?

Backbone.js

Ember.js

i tak dalej

http://todomvc.com/

Smalltalk MVC

widok odpowiada za UI (w domyśle - DOM)

var view = function(model, controller) { // widok wie o kontrolerze i modelu};

model reprezentuje warstwę danych - np. item w TodoLiście

lub całą listę TODO

var model = function() { var data = { title: "foobar" }; // model nie wie o kontrolerze i widoku};

kontroler decyduje o przepływie danych w aplikacji

var controller = function(model) { return { setNewTitle : function(val) { } };};

sterowanie odbywa się poprzez kontroler (wzorzec Strategy)

widok wydaje komunikaty dla modelu przez kontroler

var view = function(model, controller) { controller.setNewTitle($("input.title").val());};

widok obserwuje zmiany w modelu

widok wie o zmianach w modelu dzięki implementacji

wzorca Observer w modelu

jednym słowem mając referencję do modelu możemy

nasłuchiwać na zdarzenia, które on emituje

var view = function(model, controller) { model.addEventListener("updated", function() { console.log("cos sie zmienilo w modelu"); });};

widok może mieć podwidoki (wzorzec Composite)

widok korzysta z danych modelu

var view = function(model, controller) { var items = model.getItems();};

widok tworzy lub „dostaje” kontroler

var view = function(model, controller) { var controller = controller || makeMyController();};

model musi udostępniać coś w rodzaju addEventListener

np. w ten sposób:

var model = function() { var data = { title: "foobar" };

return { addEventListener : function() { //... } };};

jak widok daje znać, że coś się zmieniło i należy uaktualnić

dane w modelu?

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

w uproszczeniu...

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

krok po kroku w przypadku TODO List

1. umożliwiamy dodanie nowego itemu TODO w widoku - np. nasłuchując na kliknięcie przycisku dodaj

1. dodajemy item TODO w widoku2. widok przekazuje nazwę (np. „zrób zakupy”) tego itemu do kontrolera

1. dodajemy item TODO w widoku2. widok przekazuje nazwę tego itemu do kontrolera3. kontroler sprawdza, czy dana wartość jest poprawna i tworzy model itemu (itemModel) po czym dodaje go do listy listModel

1. dodajemy item TODO w widoku2. widok przekazuje nazwę tego itemu do kontrolera3. kontroler sprawdza, czy dana wartość jest poprawna i tworzy model itemu (itemModel) po czym dodaje go do listy listModel4. Model listModel dodaje nowy item i emituje zdarzenie „itemAdded”

1. dodajemy item TODO w widoku2. widok przekazuje nazwę tego itemu do kontrolera3. kontroler sprawdza, czy dana wartość jest poprawna i tworzy model itemu (itemModel) po czym dodaje go do listy listModel4. Model listModel dodaje nowy item i emituje zdarzenie „itemAdded”5. widok odpowiedzialny za wyświetlanie listy itemów nasłuchuje na zdarzenie „itemAdded” i odpowiednio reaguje czyszcząc dotychczasową listę itemów i aktualizując ją o dane z listModel - np. var items = listModel.getItems();