Учебники

KnockoutJS — Наблюдаемые

Октябрь 2, 2018

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

  • Наблюдаемые и отслеживание зависимостей между ними — элементы DOM подключаются к ViewModel через «привязку данных». Они обмениваются информацией через Observables. Это автоматически обеспечивает отслеживание зависимостей.

  • Декларативные привязки между пользовательским интерфейсом и ViewModel — элементы DOM связаны с ViewModel через концепцию «привязки данных».

  • Создание шаблонов для повторного использования компонентов. Использование шаблонов обеспечивает надежный способ создания сложных веб-приложений.

Наблюдаемые и отслеживание зависимостей между ними — элементы DOM подключаются к ViewModel через «привязку данных». Они обмениваются информацией через Observables. Это автоматически обеспечивает отслеживание зависимостей.

Декларативные привязки между пользовательским интерфейсом и ViewModel — элементы DOM связаны с ViewModel через концепцию «привязки данных».

Создание шаблонов для повторного использования компонентов. Использование шаблонов обеспечивает надежный способ создания сложных веб-приложений.

Мы будем изучать Observables в этой главе.

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

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

Синтаксис

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

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

пример

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

Live Demo 

<!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 в браузере.

  • Введите имя как Скотт и обратите внимание, что имя отражается в выходных данных.

Сохраните приведенный выше код в файле first_observable_pgm.htm .

Откройте этот файл HTML в браузере.

Введите имя как Скотт и обратите внимание, что имя отражается в выходных данных.

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

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

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

Sr.No. Операция чтения / записи и синтаксис
1

Читать

Чтобы прочитать значение, просто вызовите свойство Observable без параметров, таких как: AppViewModel.yourName ();

2

Написать

Чтобы записать / обновить значение в свойстве Observable, просто передайте требуемое значение в параметре, например: AppViewModel.yourName (‘Bob’);

3

Написать несколько

Несколько свойств ViewModel могут быть обновлены в одной строке с помощью синтаксиса цепочки, например: AppViewModel.yourName (‘Bob’). YourAge (45);

Читать

Чтобы прочитать значение, просто вызовите свойство Observable без параметров, таких как: AppViewModel.yourName ();

Написать

Чтобы записать / обновить значение в свойстве Observable, просто передайте требуемое значение в параметре, например: AppViewModel.yourName (‘Bob’);

Написать несколько

Несколько свойств ViewModel могут быть обновлены в одной строке с помощью синтаксиса цепочки, например: AppViewModel.yourName (‘Bob’). YourAge (45);

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

Наблюдаемое объявление заботится о модификации данных одного объекта. 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’).

Эти функции работают во всех браузерах.

Эти функции позаботятся о отслеживании зависимостей автоматически.

Синтаксис прост в использовании. Например, чтобы вставить элемент в массив, вам просто нужно использовать arrayName.push (‘value’) вместо arrayName (). Push (‘value’).

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

Sr.No. Методы и описание
1 (нажать «значение»)

Вставляет новый элемент в конец массива.

2 поп ()

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

3 unshift ( ‘значение’)

Вставляет новое значение в начало массива.

4 сдвиг()

Удаляет первый элемент из массива и возвращает его.

5 задний ход()

Меняет порядок массива.

6 Сортировать()

Сортирует элементы массива в порядке возрастания.

7 сращивать (начальный индекс, конечный индекс)

Принимает 2 параметра — start-index и end-index — удаляет элементы, начиная с начала до конца index, и возвращает их в виде массива.

8 IndexOf ( ‘значение’)

Эта функция возвращает индекс первого вхождения предоставленного параметра.

9 срез (начальный индекс, конечный индекс)

Этот метод вырезает часть массива. Возвращает элементы от начального индекса до конечного индекса.

10 удалить все()

Удаляет все элементы и возвращает их в виде массива.

11 удалить ( «значение»)

Удаляет элементы, соответствующие параметру, и возвращает в виде массива.

12 удалить (функция (элемент) {условие})

Удаляет элементы, которые удовлетворяют условию, и возвращает их в виде массива.

13 удалить ([набор значений])

Удаляет элементы, которые соответствуют заданному набору значений.

14

destroyAll ()

Помечает все элементы в массиве свойством _destroy со значением true.

15

уничтожить ( «значение»)

Ищет элемент, равный параметру, и помечает его специальным свойством _destroy со значением true.

16

уничтожить (функция (предмет) {условие})

Находит все элементы, которые удовлетворяют условию, помечает их свойством _destroy с истинным значением.

17

уничтожить ([набор значений])

Находит элементы, которые соответствуют заданному набору значений, помечает их как _destroy с истинным значением.

Вставляет новый элемент в конец массива.

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

Вставляет новое значение в начало массива.

Удаляет первый элемент из массива и возвращает его.

Меняет порядок массива.

Сортирует элементы массива в порядке возрастания.

Принимает 2 параметра — start-index и end-index — удаляет элементы, начиная с начала до конца index, и возвращает их в виде массива.

Эта функция возвращает индекс первого вхождения предоставленного параметра.

Этот метод вырезает часть массива. Возвращает элементы от начального индекса до конечного индекса.

Удаляет все элементы и возвращает их в виде массива.

Удаляет элементы, соответствующие параметру, и возвращает в виде массива.

Удаляет элементы, которые удовлетворяют условию, и возвращает их в виде массива.

Удаляет элементы, которые соответствуют заданному набору значений.

destroyAll ()

Помечает все элементы в массиве свойством _destroy со значением true.

уничтожить ( «значение»)

Ищет элемент, равный параметру, и помечает его специальным свойством _destroy со значением true.

уничтожить (функция (предмет) {условие})

Находит все элементы, которые удовлетворяют условию, помечает их свойством _destroy с истинным значением.

уничтожить ([набор значений])

Находит элементы, которые соответствуют заданному набору значений, помечает их как _destroy с истинным значением.

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

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

40
Share: