Двусторонние пользовательские привязки

Knockout.js предоставляет мощный механизм двустороннего связывания данных, позволяющий автоматически синхронизировать модель и пользовательский интерфейс. Это означает, что любое изменение в модели немедленно отражается в интерфейсе, и наоборот — изменения в интерфейсе автоматически обновляют модель.

Observable и ObservableArray

В центре работы двусторонних привязок находятся observable и observableArray.

var viewModel = {
    name: ko.observable('Иван'),
    tasks: ko.observableArray(['Купить продукты', 'Позвонить другу'])
};
  • ko.observable(value) — создает наблюдаемое значение. Любое присвоение через метод observable() уведомляет все связанные элементы интерфейса об изменении.
  • ko.observableArray(array) — создает наблюдаемый массив, который отслеживает добавление, удаление и изменение элементов.

Привязка данных к элементам HTML

Двусторонняя привязка осуществляется через data-bind:

<input data-bind="value: name, valueUpdate: 'input'" />
<p data-bind="text: name"></p>
  • Атрибут value: name связывает поле ввода с observable name.
  • Опция valueUpdate: ‘input’ позволяет обновлять observable при каждом вводе текста, а не только при потере фокуса.
  • text: name отображает текущее значение observable в <p>.

При вводе нового текста в поле input значение name автоматически изменяется, и все элементы, привязанные к нему, обновляются мгновенно.

Двусторонняя привязка для массивов

Для работы с коллекциями используется foreach:

<ul data-bind="foreach: tasks">
    <li>
        <span data-bind="text: $data"></span>
        <button data-bind="click: $parent.removeTask">Удалить</button>
    </li>
</ul>
viewModel.removeTask = function(task) {
    viewModel.tasks.remove(task);
};
  • foreach: tasks автоматически создает элементы списка для каждого элемента массива.
  • Изменения в массиве (добавление, удаление) сразу отражаются в DOM.
  • $parent используется для доступа к родительской модели при вложенных структурах.

Привязка событий и пользовательских функций

Knockout.js позволяет привязывать пользовательские функции к событиям DOM:

<button data-bind="click: addTask">Добавить задачу</button>
viewModel.addTask = function() {
    viewModel.tasks.push('Новая задача');
};
  • Событие click вызывает метод addTask.
  • Изменение observableArray автоматически обновляет список на странице.

Применение computed для автоматического вычисления

Для создания динамических вычислений, зависящих от других observable, используется computed:

viewModel.taskCount = ko.computed(function() {
    return viewModel.tasks().length;
});
<p>Всего задач: <span data-bind="text: taskCount"></span></p>
  • Любое изменение массива tasks автоматически пересчитывает taskCount.
  • Computed может использоваться для фильтрации, суммирования или других динамических вычислений.

Привязка с условиями и видимостью

Knockout поддерживает условные привязки через visible и if:

<p data-bind="visible: tasks().length === 0">Задач нет</p>
<div data-bind="if: tasks().length > 0">
    <ul data-bind="foreach: tasks">
        <li data-bind="text: $data"></li>
    </ul>
</div>
  • visible меняет CSS display, оставляя элемент в DOM.
  • if полностью добавляет или удаляет элемент из DOM, что важно для оптимизации производительности при больших списках.

Поддержка привязки через select и radio

Двусторонняя привязка работает не только с текстовыми полями:

<select data-bind="value: selectedTask, options: tasks"></select>
<p data-bind="text: selectedTask"></p>
viewModel.selectedTask = ko.observable();
  • Изменение выбранного элемента в <select> обновляет selectedTask.
  • Изменение selectedTask программно меняет выбранный элемент в списке.

Пользовательские привязки (Custom Bindings)

Knockout позволяет создавать собственные привязки для нестандартных сценариев:

ko.bindingHandlers.uppercase = {
    update: function(element, valueAccessor) {
        var value = ko.unwrap(valueAccessor());
        element.textContent = value.toUpperCase();
    }
};
<p data-bind="uppercase: name"></p>
  • Функция update вызывается каждый раз при изменении observable.
  • ko.unwrap используется для получения текущего значения observable.

Практические рекомендации

  • Использовать observable для всех данных, которые должны синхронизироваться с UI.
  • Выбирать computed для значений, производных от других observable.
  • Применять valueUpdate: ‘input’ для мгновенного обновления при вводе текста.
  • Использовать observableArray и привязку foreach для списков, что упрощает управление DOM.
  • Пользовательские привязки позволяют расширять возможности Knockout без изменения ядра.

Эта система двусторонних привязок обеспечивает чистый, реактивный подход к построению интерфейсов, минимизируя необходимость в ручном управлении состоянием и обновлении DOM.

Оглавление