RSS Мои друзья Контакты

Наблюдаемые массивы в KnockOut

Теперь уже известно, что нужно использовать метод observable для свойства, чтобы иметь возможность отвечать на его изменения. Если же нужно реагировать на изменения в коллекции (массиве), то используюется observableArray. Наблюдаемые массивы часто задействованы в ситуациях, когда нужно отображать списки данных с возможностью фильтрации или редактирования. Не нужно путать массивы со свойствами. При добавлении объекта в наблюдаемый массив его свойства не станут наблюдаемые. Основная идея коллекций - это наблюдение за коллекцией, а не за состояниями объектов в ней.

Создать наблюдаемый массив очень просто

var observableArray = ko.observableArray([
    { name: "Bungle", type: "Bear" },
    { name: "George", type: "Hippo" },
    { name: "Zippy", type: "Unknown" }
]);

// or just
var anotherObservableArray = ko.observableArray([
    { name: "Bungle", type: "Bear" },
    { name: "George", type: "Hippo" },
    { name: "Zippy", type: "Unknown" }
]);

alert(observableArray().length);
alert(myObservableArray()[0]);

По аналогии с наблюдаемыми свойствами, метод КО observableArray возвращает функцию, по-этому чтобы получить значение массива нужно ее вызвать. В общем, чтобы добавлять/удалять элементы, можно использовать стандартные методы массивов в JavaScript. Но КО предоставляет более богатый функционал. Он предоставляет кроссбраузерное решение для методов вроде indexOf, которые появились только в новых версиях браузеров. При использовании методов КО (например, push, slice) автоматически запускается механизм проверки зависимостей и уведомления всех подписчиков, а также код выглядит более читабельным, что немало важно.

Манипулирование наблюдаемыми коллекциями

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

  • indexOf - возвращает индекс первого найденного элемента, который равный переданному аргументу. Если элемент не найден - возвращает -1
  • slice - возвращает элементы массива з начального аргумента до последнего myObservableArray.slice(1, 5)
  • push - добавляет новый элемент в массив
  • pop - удаляет последний и возвращает его
  • unshift - вставляет новый элемент в начало массива
  • shift - удаляет первый элемент и возвращает его
  • reverse - возвращает массив в обратном порядке
  • sort - сортирует массив. По умолчанию от А-Я, 0-9. Также в качестве первого параметра можно передать функцию, которая должна возвращать 0, 1 или -1, соответственно когда элементы равны, когда первый больше второго и наоборот
  • splice - удаляет и возвращает удаленные элементы из массива

Методы remove и removeAll

К сожалению в стандартном наборе методов массивов в JavaScript, нет таких полезных как

  • observableArray.remove(someItem) удаляет все значения из массива, которые равны someItem и возвращает их как массив
  • myObservableArray.remove(function(item) { return item.age < 18 }) удаляет все значения для которых callback вернет true
  • myObservableArray.removeAll(['Chad', 132, undefined]) удаляет все значения, которые равны 'Chad', 132undefined и возвращает их как массив

Также существуют аналогичные методы destroy и destroyAll, которые вместо того чтобы удалять элементы добавляют им специальную метку-свойство _destroy равное true. Элементы с таким свойством не отображаются foreach байндингом, что удобно, пользователь не видит элементов, но в массиве они есть.

Пример использование наблюдаемых массивов можно посмотреть здесь.

По материалам: KnockOut

Добавить комментарий

Комментариев: 0