Embed Size (px)
DESCRIPTION
Citation preview
r
colo
r
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);
}
Лучшая архитектура – её отсутствие?
<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', c);
colorField.value = c;
}
circle.onresize = function (e, r) {
radiusField.value = 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);
}
Взгляд на код со стороны
<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 = $('#circle'),
radiusField = $('#radius'),
colorField = $('#color');
circle.click(function () {
var c = random_color();
circle.attr('stroke', c);
colorField.val(c);
});
circle.bind(‘resize ‘, function (e, r) {
radiusField.val(r);
radiusLabel.text(radiusField.value + 'px');
});
radiusField.bind(‘change, function () {
circle.attr('r', radiusField.value);
radiusLabel.text(radiusField.value + 'px');
});
colorField.bind(‘change‘, function () {
circle.attr('stroke', colorField.val());
});
Write less, do more. jQuery нам поможет
MVVM
Model
View
View Model
A ViewModel is basically a
value converter on steroids.
Josh Smith
<svg><circle cx="110" cy="110" r="?" stroke="?" fill="transparent“ onclick="setRandomColor()"/><text>?</text></svg>
Radius:<input type="range" min="10"max="100" step="1" value="?" />Color:<input type="text" value="?" />
var ui= {
radius: 50,
color: 'red',setRandomColor: function() {
ui.color = get_random_color()
}
}
Взгляд на задачу со стороны MVVM
<svg>
<circle cx="200" cy="200" fill="transparent"
data-bind="attr: {
stroke: color,
r: radius},
click: randomizeColor,
event: { 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(e, r) {
this.radius(r);
}
};
ko.applyBindings(viewModel);
Knockout в действии
• Декларативное связывание• Автоматическое обновление UI• Отслеживание зависимостей• Templaiting• Полная автономность• Совместимость с любым JavaScript
framework’ом• Отличная документация
Спасибо
• 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://knockoutjs.com/
• http://www.knockmeout.net/
• http://learn.knockoutjs.com/
Ресурсы
