Knockout JS

С выходом HTML 5 у разработчиков снова появился интерес к JavaScript. Только на этот раз идет не просто о xmlhttp.readyState == 4, а уже существуют более продвинутые фреймворки наподобии jQuery. И хоть Silverlight сейчас одной ногой в могиле, дело его продолжает жить. В частности библиотечка Knockout поддерживает шаблон MVVM.

Простой пример с официального сайта knockoutjs.com

<!-- This is a *view* - HTML markup that defines the appearance of your UI -->

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<p>First name: <input data-bind="value: firstName, valueUpdate: 'afterkeydown'" /></p>
<p>Last name: <input data-bind="value: lastName, valueUpdate: 'afterkeydown'" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

 

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");

this.fullName = ko.dependentObservable(function() {
return this.firstName() + " " + this.lastName();
}, this);
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

В Knockout существует 3 типа observable:
1. observable — для свойств
2. dependent observable — состоит из нескольких observable
3. observable arrays — следит за массивом (удаление, добавление…)

Binding бывает один из
1. Text and appearance (text, visible, style…)
2. Form (checked, submit, event…)
3. Control flow (if, ifnot, foreach, with)
4. Templates

Для извлечения элемента из шаблона можно воспользоваться ko.dataFor(this)

Также у binding есть контекст
$data — текущий
$parent — родитель
$parents — все родители
$root — корневой

Для работы с массивами есть много методов а-ля Linq

Также полезными являются функции
ko.toJS() — конвертирует в pojo
ko.toJSON() — полезно использовать для отладки

Лучшим ресурсом для начала знакомства с этим фреймворком является официальный сайт knockoutjs.com Несмотря на то, что это open source библиотека, для нее есть очень много хорошей документации.