Write less, do more

MVVM in JavaScript using KnockoutJS

Приложение

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

Model

View

MVC

MVP

MVVM

MVVM

Model

View

View Model

A ViewModel is basically a

value converter on

steroids.Josh Smith 

r

colo

r

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

}

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

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

}

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

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

}

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

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

};

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

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

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

<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 – а код-то где?

Observables

Observables

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

Ресурсы