02 net saturday roman gomolko ''mvvm in javascript using knockoutjs''
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 966 views

 

Statistics

Views

Total Views
966
Views on SlideShare
966
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Write less, do more
    MVVM in JavaScript using KnockoutJS
  • Извечная проблема
    Model
    Приложение
    MVVM
    MVC
    MVP
    View
  • MVVM
    A ViewModel is basically a value converter on steroids.
    Josh Smith 
    Model
    View Model
    View
  • color
    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" />
    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);
    }
    Лучшая архитектура – её отсутствие
  • <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);
    }
    Лучшая архитектура – её отсутствие
  • Лучшая архитектура – её отсутствие
    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);
    }
  • <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;
    }
    };
    Мечтать не вредно
  • Декларативное связывание
    Автоматическое обновление 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" />
    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 – а код-то где?
  • Observables
  • Observables
  • 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://www.knockmeout.net/
    Ресурсы