02 net saturday roman gomolko ''mvvm in javascript using knockoutjs
TRANSCRIPT
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/
Ресурсы