Knockout - создаем модели представления с наблюдаемыми переменными

| Воскресенье, 12 мая, 2013

Метки: Javascript, Knockout Комментарии: 0

Наблюдаемые переменные

Итак, мы рассмотрели простейший случай создания модели представления и отображения ее переменной на странице, используя декларативное связывание. Но одним из ключевых преимуществ библиотеки KO является автоматическое немедленное обновление пользовательского интерфейса при изменении значений модели представления. Как KO узнает, что значение какой-либо переменной в модели представления изменилось? Для этого нужно объявить переменную в объекте как наблюдаемое(observable). Observable-объекты могут уведомлять подписчиков об изменениях и автоматически определять зависимости.

Например, перепишем предыдущую модель представления так:

var myViewModel = {
    personName: ko.observable('Bob'),
    personAge: ko.observable(123)
};

Представление вообще не нужно модифицировать – те же самые атрибуты data-bind будут работать без проблем. Разница лишь в том, что теперь они способны реагировать на изменения значений в модели представления, и когда они происходят, представление обновляется автоматически.

Чтение и запись наблюдаемых переменных

Для совместимости со всеми браузерами ko.observable объекты реализованы как функции.

• Для чтения наблюдаемой переменной, нужно просто вызвать ее, как функцию без параметров. Для нашего примера myViewModel.personName() вернет значение "Bob", а myViewModel.personAge() выдаст 123.
• Для записи значения в наблюдаемую переменную, нужно вызвать функцию с именем переменной и передать новое значение как параметр. Например, вызов функции myViewModel.personName('Mary') изменит значение переменной на "Mary".
• Для изменения сразу нескольких переменных модели, можно использовать синтаксис цепочки. Например, myViewModel.personName('Mary').personAge(50) изменит обе переменные сразу.

Весь смысл наблюдаемых переменных в том, что некоторый код получает уведомления об изменениях значений свойств модели. Многие встроенные связывания KO делают это незаметно внутри самой библиотеки. Когда разработчик добавляет атрибут data-bind="text: personName", то это связывание регистрирует себя для получения уведомлений об изменении переменной personName (здесь предполагается, что personName - observable).

Если изменить значение переменной вызовом функции myViewModel.personName('Mary'), то связывание text автоматически обновит текстовое содержимое соответствующего DOM-элемента. Так изменения в модели представления транслируются в представление.

Явная подписка на уведомления

Обычно не нужно подписываться на уведомления явно, но если возникла такая необходимость, можно зарегистрировать собственную подписку на уведомления от наблюдаемой переменной. Для этого используют функцию subscribe:

myViewModel.personName.subscribe(
function(newValue) {
    alert("Новое имя - " + newValue);
});

Для завершения получения уведомлений нужно вызвать функцию dispose у объекта подписки:

var subscription = myViewModel.personName.subscribe(
function(newValue) { /* делаем что нибудь */ }
);
// ...и потом...
subscription.dispose(); // уведомления больше не нужны

В основном, явная подписка используется редко, так как встроенное связывание и система работы с шаблонами делает это автоматически.