1. Write less, do more MVVM in JavaScript using KnockoutJS

2. Извечная проблема Model Приложение MVVM MVC MVP View

3. MVVM A ViewModel is basically a value converter on steroids. Josh Smith Model View Model View

4. color r

5. <svg> <circle id="circle" cx="110" cy="110" r="50" stroke="red" fill="transparent“ /> </svg> <div> Radius: <input type="range" min="10" max="100" step="1" id="radius" value="50" /> Color: <input type="text"id="color" value="red" /> varcircle = document.getElementById('circle'), radiusField = document.getElementById('radius'), colorField = document.getElementById('color'); radiusField.onchange = function () { circle.setAttribute('r', radiusField.value); } colorField.onchange = function () { circle.setAttribute('stroke', colorField.value); } Лучшая архитектура – её отсутствие

6. <svg> <circle id="circle" cx="110" cy="110" r="50" stroke="red" fill="transparent“ /> <text id="radiusLabel"></text> </svg> Radius: <input type="range" min="10" max="100" step="1" id="radius" value="50" /> Color: <input type="text"id="color" value="red" /> varcircle = document.getElementById('circle'), radiusField = document.getElementById('radius'); colorField = document.getElementById('color'); circle.onclick = function () { var c = random_color(); circle.setAttribute('stroke', colorField.value); colorField.value = c; } circle.onresize = function () { radiusField.value = circle.getAttribute('r'); radiusLabel.innerText = radiusField.value + 'px'; } radiusField.onchange = function () { circle.setAttribute('r', radiusField.value); radiusLabel.innerText = radiusField.value + 'px'; } colorField.onchange = function () { circle.setAttribute('stroke', colorField.value); } Лучшая архитектура – её отсутствие

7. Лучшая архитектура – её отсутствие varui = { radius: 50, color: 'red', setRadius: function (r) { this.radius = r; circle.setAttribute('radius'); radiusField.value = r; radiusLabel.innerText = radius + 'px'; }, setColor: function (c) { this.color = c; circle.setAttribute('stroke', color); colorField.value = c; } } circle.onclick = function () { var c = random_color(); ui.setColor(c); } colorField.onchange = function () { ui.setColor(colorField.value); } circle.onresize = function (radius) { ui.setRadius(radius); } radiusField.onchange = function () { ui.setRadius(radiusField.value); }

8. <svg> <circle cx="200" cy="200" fill="transparent" data-bind="?" /> <text data-bind="?"></text> </svg> Radius: <input type="range" min="10" max="100" step="1" data-bind="?" /> Color: <input type="text" data-bind="?" /> varui = { radius: 50, color: 'red', randomizeColor: function () { this.color = random_color(); }, resize: function(r) { this.radius = r; } }; Мечтать не вредно

9. Декларативное связывание Автоматическое обновление UI Отслеживание зависимостей Templaiting Полная автономность Совместимость с любым JavaScript framework’ом Отличная документация

10. <svg> <circle cx="200" cy="200" fill="transparent" data-bind=" attr: { stroke: color, r: radius }, click: randomizeColor, resize: resize " /> <text data-bind="text: radius() + 'px'" ></text> </svg> Radius: <input type="range" min="10" max="100" step="1" data-bind="value: radius" /> Color: <input type="text" data-bind="value: color" /> varviewModel = { radius: ko.observable(50), color: ko.observable('red'), randomizeColor: function () { this.color(random_color()); }, resize: function(r) { this.radius(r); } }; ko.applyBindings(viewModel); KnockoutJS – а код-то где?

11. Observables

12. Observables

13. http://en.wikipedia.org/wiki/Model_View_ViewModel http://csharperimage.jeremylikness.com/2010/04/model-view-viewmodel-mvvm-explained.html http://msdn.microsoft.com/en-us/magazine/dd419663.aspx http://www.knockmeout.net/ Ресурсы