Top Banner
Write less, do more MVVM in JavaScript using KnockoutJS
13

02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''

May 12, 2015

Download

Education

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''

Write less, do more

MVVM in JavaScript using KnockoutJS

Page 2: 02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''

Приложение

Извечная проблема

Model

View

MVC

MVP

MVVM

Page 3: 02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''

MVVM

Model

View

View Model

A ViewModel is basically a

value converter on

steroids.Josh Smith 

Page 4: 02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''

r

colo

r

Page 5: 02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''

<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" />

var circle = 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);

}

Лучшая архитектура – её отсутствие

Page 6: 02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''

<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" />

var circle = 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);

}

Лучшая архитектура – её отсутствие

Page 7: 02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''

var ui = {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);

}

Лучшая архитектура – её отсутствие

Page 8: 02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''

<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="?" />

var ui = {radius: 50,color: 'red',randomizeColor: function () {

this.color = random_color();},resize: function(r) {

this.radius = r;}

};

Мечтать не вредно

Page 9: 02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''

• Декларативное связывание• Автоматическое обновление UI• Отслеживание зависимостей• Templaiting• Полная автономность• Совместимость с любым JavaScript

framework’ом• Отличная документация

Page 10: 02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''

<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" />

var viewModel = {radius: ko.observable(50),color: ko.observable('red'),randomizeColor: function () {

this.color(random_color());},resize: function(r) {

this.radius(r);}

};

ko.applyBindings(viewModel);

KnockoutJS – а код-то где?

Page 11: 02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''

Observables

Page 12: 02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''

Observables

Page 13: 02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''

• http://en.wikipedia.org/wiki/Model_View_ViewModel• http://csharperimage.jeremylikness.com/2010/04/model-view-viewmodel-m

vvm-explained.html• http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

• http://www.knockmeout.net/

Ресурсы