Write less, do more<br />MVVM in JavaScript using KnockoutJS<br />
Извечная проблема<br />Model<br />Приложение<br />MVVM<br />MVC<br />MVP<br />View<br />
MVVM<br />A ViewModel is basically a value converter on steroids.<br />Josh Smith <br />Model<br />View Model<br />View<br />
color<br />r<br />
<svg><br /><circle id="circle" cx="110" cy="110" r="50" stroke="red" fill="transparent“ /><br /></svg><br /><div><br />Rad...
<svg><br /><circle id="circle" cx="110" cy="110" r="50" stroke="red" fill="transparent“ /><br /><text id="radiusLabel"></t...
Лучшая архитектура – её отсутствие<br />varui = {<br />radius: 50,<br />color: 'red',<br />setRadius: function (r) {<br />...
<svg><br /><circle cx="200" cy="200" fill="transparent"<br />data-bind="?"  /><br /><text data-bind="?"></text><br /></svg...
Декларативное связывание<br />Автоматическое обновление UI<br />Отслеживание зависимостей<br />Templaiting<br />Полная авт...
<svg><br /><circle cx="200" cy="200" fill="transparent"<br />data-bind="<br />attr: {<br />stroke: color,<br />r: radius<b...
Observables<br />
Observables<br />
http://en.wikipedia.org/wiki/Model_View_ViewModel<br />http://csharperimage.jeremylikness.com/2010/04/model-view-viewmodel...
Prochain SlideShare
Chargement dans…5
×

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

864 vues

Publié le

Publié dans : Formation, Technologie, Art & Photos
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
864
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. Write less, do more<br />MVVM in JavaScript using KnockoutJS<br />
  2. 2. Извечная проблема<br />Model<br />Приложение<br />MVVM<br />MVC<br />MVP<br />View<br />
  3. 3. MVVM<br />A ViewModel is basically a value converter on steroids.<br />Josh Smith <br />Model<br />View Model<br />View<br />
  4. 4. color<br />r<br />
  5. 5. <svg><br /><circle id="circle" cx="110" cy="110" r="50" stroke="red" fill="transparent“ /><br /></svg><br /><div><br />Radius:<br /><input type="range" min="10" max="100" step="1" id="radius" value="50" /><br />Color:<br /><input type="text"id="color" value="red" /><br />varcircle = document.getElementById('circle'),<br />radiusField = document.getElementById('radius'),<br />colorField = document.getElementById('color');<br />radiusField.onchange = function () {<br />circle.setAttribute('r', radiusField.value);<br />}<br />colorField.onchange = function () {<br />circle.setAttribute('stroke', colorField.value);<br />}<br />Лучшая архитектура – её отсутствие<br />
  6. 6. <svg><br /><circle id="circle" cx="110" cy="110" r="50" stroke="red" fill="transparent“ /><br /><text id="radiusLabel"></text><br /></svg><br />Radius:<br /><input type="range" min="10" max="100" step="1" id="radius" value="50" /><br />Color:<br /><input type="text"id="color" value="red" /><br />varcircle = document.getElementById('circle'),<br />radiusField = document.getElementById('radius');<br />colorField = document.getElementById('color');<br />circle.onclick = function () {<br />var c = random_color();<br />circle.setAttribute('stroke', colorField.value);<br />colorField.value = c;<br />}<br />circle.onresize = function () {<br />radiusField.value = circle.getAttribute('r');<br />radiusLabel.innerText = radiusField.value + 'px';<br />}<br />radiusField.onchange = function () {<br />circle.setAttribute('r', radiusField.value);<br />radiusLabel.innerText = radiusField.value + 'px';<br />}<br />colorField.onchange = function () {<br />circle.setAttribute('stroke', colorField.value);<br />}<br />Лучшая архитектура – её отсутствие<br />
  7. 7. Лучшая архитектура – её отсутствие<br />varui = {<br />radius: 50,<br />color: 'red',<br />setRadius: function (r) {<br />this.radius = r;<br />circle.setAttribute('radius');<br />radiusField.value = r;<br />radiusLabel.innerText = radius + 'px';<br />},<br />setColor: function (c) {<br />this.color = c;<br />circle.setAttribute('stroke', color);<br />colorField.value = c;<br />}<br />}<br />circle.onclick = function () {<br />var c = random_color();<br />ui.setColor(c);<br />}<br />colorField.onchange = function () {<br />ui.setColor(colorField.value);<br />}<br />circle.onresize = function (radius) {<br />ui.setRadius(radius);<br />}<br />radiusField.onchange = function () {<br />ui.setRadius(radiusField.value);<br />}<br />
  8. 8. <svg><br /><circle cx="200" cy="200" fill="transparent"<br />data-bind="?" /><br /><text data-bind="?"></text><br /></svg><br />Radius: <br /><input type="range" min="10" max="100" step="1" <br />data-bind="?" /><br />Color: <br /><input type="text" <br />data-bind="?" /><br />varui = {<br />radius: 50,<br />color: 'red',<br />randomizeColor: function () {<br />this.color = random_color();<br /> },<br /> resize: function(r) {<br />this.radius = r;<br /> }<br />};<br />Мечтать не вредно<br />
  9. 9. Декларативное связывание<br />Автоматическое обновление UI<br />Отслеживание зависимостей<br />Templaiting<br />Полная автономность<br />Совместимость с любым JavaScript framework’ом<br />Отличная документация<br />
  10. 10. <svg><br /><circle cx="200" cy="200" fill="transparent"<br />data-bind="<br />attr: {<br />stroke: color,<br />r: radius<br /> }, <br />click: randomizeColor,<br /> resize: resize " /><br /><text <br />data-bind="text: radius() + 'px'"<br />></text><br /></svg><br />Radius: <br /><input type="range" min="10" max="100" step="1" <br />data-bind="value: radius" /><br />Color: <br /><input type="text" <br />data-bind="value: color" /><br />varviewModel = {<br />radius: ko.observable(50),<br />color: ko.observable('red'),<br />randomizeColor: function () {<br />this.color(random_color());<br /> },<br /> resize: function(r) {<br />this.radius(r);<br /> }<br />};<br />ko.applyBindings(viewModel);<br />KnockoutJS – а код-то где?<br />
  11. 11. Observables<br />
  12. 12. Observables<br />
  13. 13. http://en.wikipedia.org/wiki/Model_View_ViewModel<br />http://csharperimage.jeremylikness.com/2010/04/model-view-viewmodel-mvvm-explained.html<br />http://msdn.microsoft.com/en-us/magazine/dd419663.aspx<br />http://www.knockmeout.net/<br />Ресурсы<br />

×