KnockoutJS - наблюдаемые

KnockoutJS основан на следующих трех важных концепциях.

Наблюдаемые объекты и отслеживание зависимостей между ними - элементы DOM подключаются к ViewModel через привязку данных. Они обмениваются информацией через Observables. Это автоматически позаботится об отслеживании зависимостей.
Декларативные привязки между UI и ViewModel - элементы DOM подключаются к ViewModel через концепцию привязки данных.
Создание шаблонов для создания повторно используемых компонентов. Шаблоны обеспечивают надежный способ создания сложных веб-приложений.

В этой главе мы будем изучать наблюдаемые.

Как указано в названии, когда вы объявляете данные / свойство ViewModel как Observable, любое изменение данных каждый раз автоматически отражается во всех местах использования данных. Это также включает обновление связанных зависимостей. KO позаботится об этих вещах, и для этого нет необходимости писать дополнительный код.

Используя Observable, становится очень легко заставить UI и ViewModel взаимодействовать динамически.

Синтаксис

Вам просто нужно объявить свойство ViewModel с функцией ko.observable() чтобы сделать его наблюдаемым.

this.property = ko.observable('value');

пример

Давайте посмотрим на следующий пример, демонстрирующий использование Observable.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Observable Example</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <!-- This is called "view" of HTML markup that defines the appearance of UI -->

      <p>Enter your name: <input data-bind = "value: yourName" /></p>
      <p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

      <script>
         <!-- This is called "viewmodel". This javascript section defines the data and behavior of UI -->

         function AppViewModel() {
            this.yourName = ko.observable("");
         }

         // Activates knockout.js
         ko.applyBindings(new AppViewModel());
      </script>
   </body>
</html>

Следующая строка предназначена для поля ввода. Как видно, мы использовали атрибут data-bind для привязки значения yourName к ViewModel.

<p>Enter your name: <input data-bind = "value: yourName" /> <p>

Следующая строка просто печатает значение yourName. Обратите внимание, что здесь тип привязки данных - это текст, поскольку мы просто читаем значение.

<p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

В следующей строке ko.observable следит за переменной yourName на предмет любых изменений в данных. После изменения соответствующие места также обновляются с измененным значением. Когда вы запустите следующий код, появится поле ввода. По мере обновления этого поля ввода новое значение будет отражаться или обновляться в тех местах, где оно используется.

this.yourName = ko.observable("");

Вывод

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код -

Сохраните приведенный выше код в first_observable_pgm.htm файл.
Откройте этот HTML-файл в браузере.
Введите имя как Скотт и обратите внимание, что имя отражается в выводе.

Изменение данных может происходить либо из пользовательского интерфейса, либо из ViewModel. Независимо от того, откуда изменяются данные, UI и ViewModel синхронизируют их между собой. Это делает механизм двусторонней привязки. В приведенном выше примере, когда вы меняете свое имя в поле ввода, ViewModel получает новое значение. Когда вы меняете свойство yourName из ViewModel, пользовательский интерфейс получает новое значение.

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

В следующей таблице перечислены операции чтения и записи, которые могут выполняться на Observables.

Sr. No.	Операция чтения / записи и синтаксис
1	Read Чтобы прочитать значение, просто вызовите свойство Observable без таких параметров, как: AppViewModel.yourName ();
2	Write Чтобы записать / обновить значение в свойстве Observable, просто передайте желаемое значение в параметре, например: AppViewModel.yourName ('Bob');
3	Write multiple Несколько свойств ViewModel можно обновить в одной строке с помощью синтаксиса цепочки, например: AppViewModel.yourName ('Bob'). YourAge (45);

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

Объявление Observable заботится об изменении данных одного объекта. ObservableArray работает с коллекцией объектов. Это очень полезная функция, когда вы имеете дело со сложными приложениями, содержащими несколько типов значений и часто меняющими их статус в зависимости от действий пользователя.

Синтаксис

this.arrayName = ko.observableArray();    // It's an empty array

Наблюдаемый массив только отслеживает, какие объекты в нем добавляются или удаляются. Он не сообщает об изменении свойств отдельного объекта.

Инициализируйте его в первый раз

Вы можете инициализировать свой массив и в то же время объявить его как Observable, передав начальные значения конструктору следующим образом.

this.arrayName = ko.observableArray(['scott','jack']);

Чтение из наблюдаемого массива

Вы можете получить доступ к элементам массива Observable следующим образом.

alert('The second element is ' + arrayName()[1]);

Функции ObservableArray

KnockoutJS имеет собственный набор функций массива Observable. Они удобны тем, что -

Эти функции работают во всех браузерах.
Эти функции автоматически позаботятся об отслеживании зависимостей.
Синтаксис прост в использовании. Например, чтобы вставить элемент в массив, вам просто нужно использовать arrayName.push ('value') вместо arrayName (). Push ('value').

Ниже приведен список различных методов наблюдаемого массива.

Sr. No.	Методы и описание
1	push ('значение') Вставляет новый элемент в конец массива.
2	поп () Удаляет последний элемент из массива и возвращает его.
3	unshift ('значение') Вставляет новое значение в начало массива.
4	сдвиг() Удаляет первый элемент из массива и возвращает его.
5	обеспечить регресс() Меняет порядок массива на обратный.
6	Сортировать() Сортирует элементы массива в порядке возрастания.
7	splice (начальный индекс, конечный индекс) Принимает 2 параметра - start-index и end-index - удаляет элементы, начиная с начального до конечного индекса, и возвращает их в виде массива.
8	indexOf ('значение') Эта функция возвращает индекс первого появления предоставленного параметра.
9	срез (начальный индекс, конечный индекс) Этот метод вырезает часть массива. Возвращает элементы от начального индекса до конечного индекса.
10	убрать все() Удаляет все элементы и возвращает их в виде массива.
11	удалить ('значение') Удаляет элементы, соответствующие параметру, и возвращает в виде массива.
12	удалить (функция (элемент) {условие}) Удаляет элементы, удовлетворяющие условию, и возвращает их в виде массива.
13	удалить ([набор значений]) Удаляет элементы, соответствующие заданному набору значений.
14	destroyAll() Помечает все элементы в массиве свойством _destroy со значением true.
15	destroy('value') Ищет элемент, равный параметру, и отмечает его специальным свойством _destroy со значением true.
16	destroy(function(item) { condition}) Находит все элементы, удовлетворяющие условию, помечает их свойством _destroy с истинным значением.
17	destroy([set of values]) Находит элементы, которые соответствуют заданному набору значений, помечает их как _destroy с истинным значением.

Note - Функции Destroy и DestroyAll из ObservableArrays предназначены в основном только для разработчиков Ruby on Rails.

Когда вы используете метод destroy, соответствующие элементы на самом деле не удаляются из массива в этот момент, а становятся скрытыми, помечая их свойством _destroy с истинным значением, чтобы они не могли быть прочитаны пользовательским интерфейсом. Элементы, помеченные как _destroy, равные true , удаляются позже при работе с графом объектов JSON.