MVVM в JavaScript.  На ринге KnockoutJS Гомолко Роман, UserReport [email_address] @romanych
r color
r color
<ul><li>< svg > </li></ul><ul><li>< circle  id =&quot;circle&quot;  cx =&quot;110&quot;  cy =&quot;110&quot;  r =&quot;50&...
<ul><li>< svg > </li></ul><ul><li>< circle  id =&quot;circle&quot;  cx =&quot;110&quot;  cy =&quot;110&quot;  r =&quot;50&...
<ul><li>< svg > </li></ul><ul><li>< circle  id =&quot;circle&quot;  cx =&quot;110&quot;  cy =&quot;110&quot;  r =&quot;50&...
<ul><li>< svg > </li></ul><ul><li>< circle  id =&quot;circle&quot;  cx =&quot;110&quot;  cy =&quot;110&quot;  r =&quot;50&...
 
 
MVVM Model View View Model A ViewModel is basically a value converter on steroids. Josh Smith 
<ul><li>< svg > </li></ul><ul><li>< circle  cx =&quot;110&quot;  cy =&quot;110&quot;  r =&quot; ? &quot;  stroke =&quot; ?...
 
<ul><li>< svg > </li></ul><ul><li>< circle  cx =&quot;200&quot;  cy =&quot;200&quot;  fill =&quot;transparent&quot; </li><...
<ul><li>Декларативное связывание </li></ul><ul><li>Автоматическое обновление UI </li></ul><ul><li>Отслеживание зависимосте...
Спасибо
<ul><li>http://en.wikipedia.org/wiki/Model_View_ViewModel </li></ul><ul><li>http://csharperimage.jeremylikness.com/2010/04...
Upcoming SlideShare
Loading in …5
×

Introduction to MVVM and Knockout

3,706 views

Published on

  • Интерактивные слайды с реальными примерами и демонстрацией основных возможностей Knockout'а: http://slides.knockoutjs.in.ua/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Introduction to MVVM and Knockout

  1. 1. MVVM в JavaScript. На ринге KnockoutJS Гомолко Роман, UserReport [email_address] @romanych
  2. 2. r color
  3. 3. r color
  4. 4. <ul><li>< svg > </li></ul><ul><li>< circle id =&quot;circle&quot; cx =&quot;110&quot; cy =&quot;110&quot; r =&quot;50&quot; stroke =&quot;red&quot; fill =&quot;transparent“ /> </li></ul><ul><li></ svg > </li></ul><ul><li>< div > </li></ul><ul><li>Radius: </li></ul><ul><li>< input type =&quot;range&quot; min =&quot;10&quot; max =&quot;100&quot; step =&quot;1&quot; id =&quot;radius&quot; value =&quot;50&quot; /> </li></ul><ul><li>Color: </li></ul><ul><li>< input type =&quot;text&quot; id =&quot;color&quot; value =&quot;red&quot; /> </li></ul><ul><li>var circle = document.getElementById('circle'), </li></ul><ul><li>radiusField = document.getElementById('radius'), </li></ul><ul><li>colorField = document.getElementById('color'); </li></ul><ul><li>radiusField.onchange = function () { </li></ul><ul><li>circle.setAttribute('r', radiusField.value); </li></ul><ul><li>} </li></ul><ul><li>colorField.onchange = function () { </li></ul><ul><li>circle.setAttribute('stroke', colorField.value); </li></ul><ul><li>} </li></ul>Лучшая архитектура – её отсутствие
  5. 5. <ul><li>< svg > </li></ul><ul><li>< circle id =&quot;circle&quot; cx =&quot;110&quot; cy =&quot;110&quot; r =&quot;50&quot; stroke =&quot;red&quot; fill =&quot;transparent“ /> </li></ul><ul><li>< text id =&quot;radiusLabel&quot;></ text > </li></ul><ul><li></ svg > </li></ul><ul><li>Radius: </li></ul><ul><li>< input type =&quot;range&quot; min =&quot;10&quot; max =&quot;100&quot; step =&quot;1&quot; id =&quot;radius&quot; value =&quot;50&quot; /> </li></ul><ul><li>Color: </li></ul><ul><li>< input type =&quot;text&quot; id =&quot;color&quot; value =&quot;red&quot; /> </li></ul><ul><li>var circle = document.getElementById('circle'), </li></ul><ul><li>radiusField = document.getElementById('radius'); </li></ul><ul><li>colorField = document.getElementById('color'); </li></ul><ul><li>circle.onclick = function () { </li></ul><ul><li>var c = random_color(); </li></ul><ul><li>circle.setAttribute('stroke', colorField.value); </li></ul><ul><li>colorField.value = c; </li></ul><ul><li>} </li></ul><ul><li>circle.onresize = function () { </li></ul><ul><li>radiusField.value = circle.getAttribute('r'); </li></ul><ul><li>radiusLabel.innerText = radiusField.value + 'px'; </li></ul><ul><li>} </li></ul><ul><li>radiusField.onchange = function () { </li></ul><ul><li>circle.setAttribute('r', radiusField.value); </li></ul><ul><li>radiusLabel.innerText = radiusField.value + 'px'; </li></ul><ul><li>} </li></ul><ul><li>colorField.onchange = function () { </li></ul><ul><li>circle.setAttribute('stroke', colorField.value); </li></ul><ul><li>} </li></ul>Лучшая архитектура – её отсутствие?
  6. 6. <ul><li>< svg > </li></ul><ul><li>< circle id =&quot;circle&quot; cx =&quot;110&quot; cy =&quot;110&quot; r =&quot;50&quot; stroke =&quot;red&quot; fill =&quot;transparent“ /> </li></ul><ul><li>< text id =&quot;radiusLabel&quot;></ text > </li></ul><ul><li></ svg > </li></ul><ul><li>Radius: </li></ul><ul><li>< input type =&quot;range&quot; min =&quot;10&quot; max =&quot;100&quot; step =&quot;1&quot; id =&quot;radius&quot; value =&quot;50&quot; /> </li></ul><ul><li>Color: </li></ul><ul><li>< input type =&quot;text&quot; id =&quot;color&quot; value =&quot;red&quot; /> </li></ul><ul><li>var circle = document.getElementById('circle'), </li></ul><ul><li>radiusField = document.getElementById('radius'); </li></ul><ul><li>colorField = document.getElementById('color'); </li></ul><ul><li>circle.onclick = function () { </li></ul><ul><li>var c = random_color(); </li></ul><ul><li>circle.setAttribute('stroke', c ); </li></ul><ul><li>colorField.value = c; </li></ul><ul><li>} </li></ul><ul><li>circle.onresize = function ( e, r ) { </li></ul><ul><li>radiusField.value = r ; </li></ul><ul><li>radiusLabel.innerText = radiusField.value + 'px'; </li></ul><ul><li>} </li></ul><ul><li>radiusField.onchange = function () { </li></ul><ul><li>circle.setAttribute('r', radiusField.value); </li></ul><ul><li>radiusLabel.innerText = radiusField.value + 'px'; </li></ul><ul><li>} </li></ul><ul><li>colorField.onchange = function () { </li></ul><ul><li>circle.setAttribute('stroke', colorField.value); </li></ul><ul><li>} </li></ul>Взгляд на код со стороны
  7. 7. <ul><li>< svg > </li></ul><ul><li>< circle id =&quot;circle&quot; cx =&quot;110&quot; cy =&quot;110&quot; r =&quot;50&quot; stroke =&quot;red&quot; fill =&quot;transparent“ /> </li></ul><ul><li>< text id =&quot;radiusLabel&quot;></ text > </li></ul><ul><li></ svg > </li></ul><ul><li>Radius: </li></ul><ul><li>< input type =&quot;range&quot; min =&quot;10&quot; max =&quot;100&quot; step =&quot;1&quot; id =&quot;radius&quot; value =&quot;50&quot; /> </li></ul><ul><li>Color: </li></ul><ul><li>< input type =&quot;text&quot; id =&quot;color&quot; value =&quot;red&quot; /> </li></ul><ul><li>var circle = $ (' # circle'), </li></ul><ul><li>radiusField = $ (' # radius') , </li></ul><ul><li>colorField = $ (' # color'); </li></ul><ul><li>circle. click( function () { </li></ul><ul><li>var c = random_color(); </li></ul><ul><li>circle. attr ('stroke', c ); </li></ul><ul><li>colorField.val ( c ) ; </li></ul><ul><li>} ); </li></ul><ul><li>circle. bind(‘r esize ‘, function ( e, r ) { </li></ul><ul><li>radiusField.val (r) ; </li></ul><ul><li>radiusLabel. text( radiusField.value + 'px' ) ; </li></ul><ul><li>} ); </li></ul><ul><li>radiusField. bind(‘ change , function () { </li></ul><ul><li>circle. attr ('r', radiusField.value); </li></ul><ul><li>radiusLabel. text( radiusField.value + 'px' ) ; </li></ul><ul><li>} ); </li></ul><ul><li>colorField. bind(‘ change ‘, function () { </li></ul><ul><li>circle. attr ('stroke', colorField.val () ); </li></ul><ul><li>} ); </li></ul>Write less, do more. jQuery нам поможет
  8. 10. MVVM Model View View Model A ViewModel is basically a value converter on steroids. Josh Smith 
  9. 11. <ul><li>< svg > </li></ul><ul><li>< circle cx =&quot;110&quot; cy =&quot;110&quot; r =&quot; ? &quot; stroke =&quot; ? &quot; fill =&quot;transparent“ onclick =&quot;setRandomColor()&quot;/> </li></ul><ul><li>< text >?</ text > </li></ul><ul><li></ svg > </li></ul><ul><li>Radius: </li></ul><ul><li>< input type =&quot;range&quot; min =&quot;10&quot; </li></ul><ul><li>max =&quot;100&quot; step =&quot;1&quot; </li></ul><ul><li>value =&quot; ? &quot; /> </li></ul><ul><li>Color: </li></ul><ul><li>< input type =&quot;text&quot; value =&quot; ? &quot; /> </li></ul><ul><li>var ui= { </li></ul><ul><li>radius: 50, </li></ul><ul><li>color: 'red', </li></ul><ul><li>setRandomColor: function() { </li></ul><ul><li>ui.color = get_random_color() </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>Взгляд на задачу со стороны MVVM
  10. 13. <ul><li>< svg > </li></ul><ul><li>< circle cx =&quot;200&quot; cy =&quot;200&quot; fill =&quot;transparent&quot; </li></ul><ul><li>data-bind =&quot;attr: { </li></ul><ul><li>stroke: color, </li></ul><ul><li>r: radius}, </li></ul><ul><li>click: randomizeColor, </li></ul><ul><li>event: { resize: resize } &quot; /> </li></ul><ul><li>< text data-bind =&quot;text: radius() + 'px'&quot;></ text > </li></ul><ul><li></ svg > </li></ul><ul><li>Radius : </li></ul><ul><li>< input type =&quot;range&quot; min =&quot;10&quot; max =&quot;100&quot; step =&quot;1&quot; data-bind =&quot;value: radius&quot; /> </li></ul><ul><li>Color : </li></ul><ul><li>< input type =&quot;text&quot; data-bind =&quot;value: color&quot; /> </li></ul><ul><li>var viewModel = { </li></ul><ul><li>radius: ko.observable(50), </li></ul><ul><li>color: ko.observable('red'), </li></ul><ul><li>randomizeColor: function () { </li></ul><ul><li>this.color(random_color()); </li></ul><ul><li>}, </li></ul><ul><li>resize: function( e, r) { </li></ul><ul><li>this.radius(r); </li></ul><ul><li>} </li></ul><ul><li>}; </li></ul><ul><li>ko.applyBindings(viewModel); </li></ul>Knockout в действии
  11. 14. <ul><li>Декларативное связывание </li></ul><ul><li>Автоматическое обновление UI </li></ul><ul><li>Отслеживание зависимостей </li></ul><ul><li>Templaiting </li></ul><ul><li>Полная автономность </li></ul><ul><li>Совместимость с любым JavaScript framework’ом </li></ul><ul><li>Отличная документация </li></ul>
  12. 15. Спасибо
  13. 16. <ul><li>http://en.wikipedia.org/wiki/Model_View_ViewModel </li></ul><ul><li>http://csharperimage.jeremylikness.com/2010/04/model-view-viewmodel-mvvm-explained.html </li></ul><ul><li>http://msdn.microsoft.com/en-us/magazine/dd419663.aspx </li></ul><ul><li>http://knockoutjs.com/ </li></ul><ul><li>http://www.knockmeout.net/ </li></ul><ul><li>http://learn.knockoutjs.com/ </li></ul>Ресурсы

×