KnockoutJS - Observables

KnockoutJS se basa en los siguientes 3 conceptos importantes.

  • Observables y seguimiento de dependencias entre ellos: los elementos DOM están conectados a ViewModel a través de 'data-bind'. Intercambian información a través de Observables. Esto se encarga automáticamente del seguimiento de la dependencia.

  • Enlaces declarativos entre UI y ViewModel: los elementos DOM están conectados a ViewModel a través del concepto de 'vinculación de datos'.

  • Creación de plantillas para crear componentes reutilizables: la creación de plantillas proporciona una forma sólida de crear aplicaciones web complejas.

Estudiaremos Observables en este capítulo.

Como el nombre lo especifica, cuando declaras un dato / propiedad de ViewModel como Observable, cualquier modificación de datos cada vez se refleja automáticamente en todos los lugares donde se utilizan los datos. Esto también incluye actualizar las dependencias relacionadas. KO se encarga de estas cosas y no es necesario escribir código adicional para lograrlo.

Con Observable, resulta muy fácil hacer que la interfaz de usuario y ViewModel se comuniquen dinámicamente.

Sintaxis

Solo necesita declarar la propiedad ViewModel con la función ko.observable() para hacerlo observable.

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

Ejemplo

Echemos un vistazo al siguiente ejemplo que demuestra el uso de 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>

La siguiente línea es para el cuadro de entrada. Como puede verse, hemos utilizado el atributo de enlace de datos para vincular el valor de yourName a ViewModel.

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

La siguiente línea simplemente imprime el valor de yourName. Tenga en cuenta que aquí el tipo de enlace de datos es el texto, ya que simplemente estamos leyendo el valor.

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

En la siguiente línea, ko.observable vigila la variable yourName para detectar cualquier modificación en los datos. Una vez que hay una modificación, los lugares correspondientes también se actualizan con el valor modificado. Cuando ejecute el siguiente código, aparecerá un cuadro de entrada. A medida que actualice ese cuadro de entrada, el nuevo valor se reflejará o actualizará en los lugares donde se use.

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

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

  • Guarde el código anterior en first_observable_pgm.htm archivo.

  • Abra este archivo HTML en un navegador.

  • Ingrese el nombre como Scott y observe que el nombre se refleja en la salida.

La modificación de datos puede realizarse desde la interfaz de usuario o desde ViewModel. Independientemente de dónde se modifiquen los datos, la interfaz de usuario y ViewModel mantienen la sincronización entre ellos. Esto lo convierte en un mecanismo de enlace bidireccional. En el ejemplo anterior, cuando cambia su nombre en el cuadro de entrada, ViewModel obtiene un nuevo valor. Cuando cambia la propiedad yourName desde dentro de ViewModel, la interfaz de usuario recibe un nuevo valor.

Observables de lectura y escritura

La siguiente tabla enumera las operaciones de lectura y escritura que se pueden realizar en Observables.

No Señor. Operación de lectura / escritura y sintaxis
1

Read

Para leer el valor, simplemente llame a la propiedad Observable sin parámetros como: AppViewModel.yourName ();
2

Write

Para escribir / actualizar el valor en la propiedad observable, simplemente pase el valor deseado en un parámetro como: AppViewModel.yourName ('Bob');
3

Write multiple

Se pueden actualizar varias propiedades de ViewModel en una sola fila con la ayuda de sintaxis de encadenamiento como: AppViewModel.yourName ('Bob'). YourAge (45);

Matrices observables

La declaración observable se encarga de las modificaciones de datos de un solo objeto. ObservableArray trabaja con la colección de objetos. Esta es una característica muy útil cuando se trata de aplicaciones complejas que contienen varios tipos de valores y cambian su estado con frecuencia en función de las acciones del usuario.

Sintaxis

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

La matriz observable solo rastrea qué objetos en ella se agregan o eliminan. No notifica si se modifican las propiedades del objeto individual.

Inicializarlo por primera vez

Puede inicializar su matriz y, al mismo tiempo, puede declararla como Observable pasando los valores iniciales al constructor de la siguiente manera.

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

Lectura de una matriz observable

Puede acceder a los elementos de matriz observables de la siguiente manera.

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

Funciones ObservableArray

KnockoutJS tiene su propio conjunto de funciones de matriz observables. Son convenientes porque:

  • Estas funciones funcionan en todos los navegadores.

  • Estas funciones se encargarán del seguimiento de las dependencias automáticamente.

  • La sintaxis es fácil de usar. Por ejemplo, para insertar un elemento en una matriz, solo necesita usar arrayName.push ('valor') en lugar de arrayName (). Push ('valor').

A continuación se muestra la lista de varios métodos de matriz observable.

No Señor. Métodos y descripción
1 empujar ('valor')

Inserta un nuevo elemento al final de la matriz.
2 popular()

Elimina el último elemento de la matriz y lo devuelve.
3 unshift ('valor')

Inserta un nuevo valor al principio de la matriz.
4 cambio()

Elimina el primer elemento de la matriz y lo devuelve.
5 contrarrestar()

Invierte el orden de la matriz.
6 ordenar()

Ordena los elementos de la matriz en orden ascendente.
7 empalme (índice inicial, índice final)

Acepta 2 parámetros, índice de inicio y índice de finalización, elimina elementos que comienzan desde el índice de inicio a fin y los devuelve como una matriz.
8 indexOf ('valor')

Esta función devuelve el índice de la primera aparición del parámetro proporcionado.
9 segmento (índice inicial, índice final)

Este método corta una parte de una matriz. Devuelve los elementos desde el índice inicial hasta el índice final.
10 eliminar todo()

Elimina todos los elementos y los devuelve como una matriz.
11 eliminar ('valor')

Elimina elementos que coinciden con el parámetro y los devuelve como una matriz.
12 eliminar (función (elemento) {condición})

Elimina los elementos que cumplen la condición y los devuelve como una matriz.
13 eliminar ([conjunto de valores])

Elimina elementos que coinciden con un conjunto de valores determinado.
14

destroyAll()

Marca todos los elementos de una matriz con la propiedad _destroy con valor verdadero.
15

destroy('value')

Busca un elemento igual al parámetro y lo marca con una propiedad especial _destroy con valor verdadero.
dieciséis

destroy(function(item) { condition})

Busca todos los elementos que cumplen la condición y los marca con la propiedad _destroy con valor verdadero.
17

destroy([set of values])

Encuentra los elementos que coinciden con un conjunto de valores dado, los marca como _destroy con valor verdadero.

Note - Destroy and DestroyAll Functions from ObservableArrays son principalmente para desarrolladores de 'Ruby on Rails'.

Cuando usa el método de destrucción, los elementos correspondientes no se eliminan realmente de la matriz en ese momento, sino que se ocultan marcándolos con la propiedad _destroy con valor verdadero para que la interfaz de usuario no pueda leerlos. Los elementos marcados como _destroy igual a verdadero se eliminan más tarde al tratar con el gráfico de objetos JSON.