KnockoutJS - Enlaces declarativos

El enlace declarativo en KnockoutJS proporciona una forma poderosa de conectar datos a la interfaz de usuario.

Es importante comprender la relación entre enlaces y Observables. Técnicamente, estos dos son diferentes. Puede usar un objeto JavaScript normal ya que ViewModel y KnockoutJS pueden procesar el enlace de View correctamente.

Sin Observable, la propiedad de la interfaz de usuario se procesará solo por primera vez. En este caso, no se puede actualizar automáticamente en función de la actualización de datos subyacente. Para lograr esto, las vinculaciones deben referirse a Propiedades observables.

Sintaxis de enlace

La encuadernación consta de 2 elementos, la encuadernación name y value. A continuación se muestra un ejemplo simple:

Today is : <span data-bind = "text: whatDay"></span>

Aquí, el texto es el nombre vinculante y whatDay es el valor vinculante. Puede tener varios enlaces separados por comas, como se muestra en la siguiente sintaxis.

Your name: <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />

Aquí, el valor se actualiza después de presionar cada tecla.

Valores vinculantes

El valor vinculante puede ser un single value, literal, un variable o puede ser un JavaScriptexpresión. Si el enlace se refiere a alguna expresión o referencia no válida, entonces KO producirá un error y dejará de procesar el enlace.

A continuación se muestran algunos ejemplos de enlaces.

<!-- simple text binding -->
<p>Enter employee name: <input   -bind = 'value: empName' /></p>

<!-- click binding, call a specific function -->
<button data-bind="click: sortEmpArray">Sort Array</button>

<!-- options binding -->
<select multiple = "true" size = "8" data-bind = "options: empArray , 
   selectedOptions: chosenItem"> </select>

Tenga en cuenta los siguientes puntos:

  • Los espacios en blanco no hacen ninguna diferencia.

  • A partir de KO 3.0, puede omitir el valor de vinculación que le dará a la vinculación un valor indefinido.

Contexto vinculante

Un objeto puede hacer referencia a los datos que se utilizan en los enlaces actuales. Este objeto se llamabinding context.

KnockoutJS crea y gestiona la jerarquía de contexto automáticamente. La siguiente tabla enumera los diferentes tipos de contextos vinculantes proporcionados por KO.

No Señor. Tipos y descripción de contexto vinculante
1

$root

Esto siempre se refiere al ViewModel de nivel superior. Esto hace posible acceder a métodos de nivel superior para manipular ViewModel. Este suele ser el objeto, que se pasa a ko.applyBindings.
2

$data

Esta propiedad se parece mucho a thispalabra clave en el objeto Javascript. La propiedad $ data en un contexto de enlace se refiere al objeto ViewModel para el contexto actual.
3

$index

Esta propiedad contiene el índice de un elemento actual de una matriz dentro de un bucle foreach. El valor de $ index cambiará automáticamente a medida que se actualice la matriz Observable subyacente. Obviamente, este contexto solo está disponible paraforeach fijaciones.
4

$parent

Esta propiedad se refiere al objeto ViewModel principal. Esto es útil cuando desea acceder a las propiedades externas de ViewModel desde el interior de un bucle anidado.
5

$parentContext

El objeto de contexto que está vinculado al nivel principal se llama $parentContext. Esto es diferente de$parent. $ parent se refiere a datos. Mientras que $ parentContext se refiere al contexto de enlace. Por ejemplo, es posible que deba acceder al índice de cada elemento externo desde un contexto interno.
6

$rawdata

Este contexto contiene el valor de ViewModel sin procesar en la situación actual. Esto se parece a $ data, pero la diferencia es que si ViewModel está envuelto en Observable, $ data simplemente se desenvuelve. ViewModel y $ rawdata se convierten en datos observables reales.
7

$component

Este contexto se usa para referirse a ViewModel de ese componente, cuando está dentro de un componente en particular. Por ejemplo, es posible que desee acceder a alguna propiedad de ViewModel en lugar de los datos actuales en la sección de plantilla del componente.
8

$componentTemplateNodes

Esto representa una matriz de nodos DOM que se pasan a ese componente en particular cuando se encuentra dentro de una plantilla de componente específica.

Los siguientes términos también están disponibles de forma vinculante, pero en realidad no son un contexto vinculante.

  • $context - Esto no es más que un objeto de contexto de enlace existente.

  • $element - Este objeto se refiere a un elemento en DOM en el enlace actual.

Trabajar con texto y apariencias

A continuación se muestra una lista de tipos de encuadernación proporcionados por KO para tratar el texto y las apariencias visuales.

No Señor. Tipo de encuadernación y uso
1 visible: <condición de vinculación>

Mostrar u ocultar el elemento DOM HTML en función de determinadas condiciones.
2 texto: <valor-encuadernación>

Para establecer el contenido de un elemento DOM HTML.
3 html: <valor de enlace>

Para establecer el contenido de marcado HTML de un elemento DOM.
4 css: <objeto-encuadernado>

Aplicar clases CSS a un elemento.
5 estilo: <binding-object>

Para definir el atributo de estilo en línea de un elemento.
6 attr: <binding-object>

Para agregar atributos a un elemento de forma dinámica.

Trabajar con enlaces de flujo de control

A continuación se muestra una lista de tipos de enlaces de flujo de control proporcionados por KO.

No Señor. Tipo de encuadernación y uso
1 foreach: <matriz de vinculación>

En este enlace, se hace referencia a cada elemento de la matriz en el marcado HTML en un bucle.
2 si: <condición de vinculación>

Si la condición es verdadera, se procesará el marcado HTML proporcionado. De lo contrario, se eliminará de DOM.
3 ifnot: <condición de vinculación>

Negación de If. Si la condición es verdadera, se procesará el marcado HTML proporcionado. De lo contrario, se eliminará de DOM.
4 con: <binding-object>

Este enlace se utiliza para enlazar los elementos secundarios de un objeto en el contexto del objeto especificado.
5 componente: <nombre de componente> OR componente: <objeto de componente>

Este enlace se usa para insertar un componente en elementos DOM y pasar los parámetros opcionalmente.

Trabajar con enlaces de campos de formulario

A continuación se muestra la lista de tipos de enlaces de campos de formulario proporcionados por KO.

No Señor. Tipo de encuadernación y uso
1 haga clic en: <función de enlace>

Este enlace se utiliza para invocar una función de JavaScript asociada con un elemento DOM basado en un clic.
2 evento: <DOM-event: handler-function>

Este enlace se utiliza para escuchar los eventos DOM especificados y llamar a las funciones del controlador asociadas en función de ellos.
3 enviar: <función de vinculación>

Este enlace se utiliza para invocar una función de JavaScript cuando se envía el elemento DOM asociado.
4 habilitar: <valor-enlace>

Este enlace se usa para habilitar ciertos elementos DOM basados ​​en una condición específica.
5 deshabilitar: <valor-enlace>

Este enlace deshabilita el elemento DOM asociado cuando el parámetro se evalúa como verdadero.
6 valor: <binding-value>

Este enlace se utiliza para vincular el valor del elemento DOM respectivo a la propiedad ViewModel.
7 textInput: <binding-value>

Este enlace se utiliza para crear un enlace bidireccional entre el cuadro de texto o área de texto y la propiedad ViewModel.
8 hasFocus: <valor de enlace>

Este enlace se utiliza para establecer manualmente el foco de un elemento DOM HTML a través de una propiedad ViewModel.
9 comprobado: <valor-enlace>

Este enlace se utiliza para crear un vínculo entre un elemento de formulario comprobable y la propiedad ViewModel.
10 opciones: <matriz de enlace>

Este enlace se utiliza para definir las opciones de un elemento seleccionado.
11 selectedOptions: <binding-array>

Este enlace se utiliza para trabajar con elementos que están seleccionados actualmente en el control de formulario de selección de lista múltiple.
12 UniqueName: <valor de enlace>

Este enlace se utiliza para generar un nombre único para un elemento DOM.