Downloaded 12 times
02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''
- 1. Write less, do moreMVVMin JavaScript using KnockoutJS
- 2.
- 3. MVVMA ViewModel isbasically a value converter on steroids.Josh Smith ModelView ModelView
- 4.
- 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.
- 12.
- 13.