Observable arrays и их методы

Knockout.js предоставляет мощный механизм двусторонней привязки данных, который позволяет автоматически обновлять пользовательский интерфейс при изменении данных и наоборот. Одним из ключевых инструментов для работы с коллекциями данных являются observable arrays — наблюдаемые массивы, обеспечивающие реактивность элементов коллекции.

Создание Observable Array

Для создания наблюдаемого массива используется функция ko.observableArray. Она позволяет хранить массив объектов и автоматически отслеживать изменения в коллекции:

var tasks = ko.observableArray([
    { name: "Купить продукты", done: false },
    { name: "Помыть машину", done: true }
]);

Особенности:

  • Любые изменения в массиве вызывают обновление привязанных элементов интерфейса.
  • Можно хранить объекты, примитивные значения или даже другие observable объекты.

Основные методы Observable Array

Наблюдаемые массивы поддерживают все стандартные методы массива JavaScript и добавляют специальные методы для реактивного обновления интерфейса.

1. push(item) Добавляет элемент в конец массива и уведомляет подписчиков:

tasks.push({ name: "Позвонить другу", done: false });

2. pop() Удаляет последний элемент массива и возвращает его:

var lastTask = tasks.pop();

3. shift() и unshift(item) Удаляет первый элемент (shift) или добавляет элемент в начало массива (unshift):

tasks.unshift({ name: "Сделать зарядку", done: false });
var firstTask = tasks.shift();

4. remove(itemOrFunction) Удаляет элементы, соответствующие значению или условию:

// Удаление по значению
tasks.remove({ name: "Помыть машину", done: true });

// Удаление по функции
tasks.remove(function(task) {
    return task.done === true;
});

5. removeAll([array]) Удаляет все элементы или только те, которые указаны в массиве:

tasks.removeAll(); // Очистка массива
tasks.removeAll([{ name: "Купить продукты", done: false }]); // Удаляет только совпадающий элемент

6. replace(oldItem, newItem) Заменяет существующий элемент новым:

tasks.replace(
    { name: "Купить продукты", done: false },
    { name: "Купить продукты и напитки", done: false }
);

7. sort([comparer]) и reverse() Сортирует или переворачивает массив с сохранением реактивности:

tasks.sort(function(a, b) {
    return a.name.localeCompare(b.name);
});
tasks.reverse();

8. indexOf(item) Возвращает индекс первого найденного элемента или -1:

var index = tasks.indexOf({ name: "Купить продукты", done: false });

Подписка на изменения Observable Array

Observable arrays позволяют отслеживать изменения в массиве с помощью метода subscribe:

tasks.subscribe(function(changes) {
    console.log("Массив изменился:", changes);
}, null, "arrayChange");

Параметр "arrayChange" обеспечивает получение подробного отчета о добавленных и удаленных элементах. Каждое изменение представлено объектом вида:

{ status: "added", value: {...}, index: 2 }
{ status: "deleted", value: {...}, index: 0 }

Использование в привязках интерфейса

Observable arrays особенно эффективны в связке с привязками, такими как foreach:

<ul data-bind="foreach: tasks">
    <li>
        <input type="checkbox" data-bind="checked: done">
        <span data-bind="text: name"></span>
    </li>
</ul>

Любое добавление или удаление элемента через методы observable array автоматически обновит DOM без дополнительных манипуляций.

Комбинация с другими observables

Элементы observable array могут сами быть observables, что позволяет создавать вложенные реактивные структуры:

var tasks = ko.observableArray([
    { name: ko.observable("Купить продукты"), done: ko.observable(false) }
]);
tasks()[0].done(true); // Обновит только статус первой задачи

Методы фильтрации и манипуляции

Knockout.js предоставляет удобные утилиты для работы с observable array:

  • ko.utils.arrayFilter(array, predicate) – фильтрует элементы без изменения оригинала.
  • ko.utils.arrayMap(array, mapping) – преобразует элементы массива.
  • ko.utils.arrayForEach(array, action) – выполняет действие для каждого элемента.

Эти методы часто применяются вместе с computed observables для динамического отображения подмножеств данных.

Вывод

Observable arrays — это основной инструмент управления коллекциями данных в Knockout.js. Их методы позволяют добавлять, удалять, заменять, сортировать и фильтровать элементы с полной реактивностью. Подписки на изменения и интеграция с привязками DOM делают работу с массивами прозрачной и мощной, позволяя строить динамичные, отзывчивые интерфейсы без прямого манипулирования DOM.

Оглавление