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.