KnockoutJS - enlace de componentes

Este enlace se usa para insertar un componente en elementos DOM y pasar los parámetros opcionalmente. Esta unión se puede lograr de las siguientes dos formas:

Sintaxis taquigráfica
Sintaxis completa

Sintaxis taquigráfica

En este enfoque, solo se especifica el nombre del componente sin especificar ningún parámetro.

Syntax

<div data-bind = 'component: "component-name"'></div>

El valor del parámetro pasado puede ser observable. Por lo tanto, siempre que lo observable cambie, la instancia del componente anterior se eliminará y la nueva se creará de acuerdo con el valor del parámetro actualizado.

Sintaxis completa

Este enfoque acepta el parámetro en forma de objeto.

Syntax

<div data-bind = 'component: {
   name: "component-name",
   params: { param1: value1, param2:value2 ...}
}'></div>

El objeto se compone de los siguientes dos elementos:

name- Este es el nombre del componente a insertar. Como se mencionó anteriormente, esto puede ser observable.
params- Este es un objeto que se pasará al componente. En su mayoría, será un objeto de valor-clave que incluye varios parámetros. Esta es la mayoría de las veces que recibe el constructor de un ViewModel.

Flujo de trabajo de procesamiento de componentes

El siguiente diagrama explica el proceso que tiene lugar cuando un componente es inyectado por enlace de componentes.

Veamos el proceso en detalle:

Receive ViewModel factory and template from component loaders- El cargador predeterminado solicita y recibe la plantilla y el modelo de vista registrados. De forma predeterminada, este es un proceso asincrónico.

Clone the component template- En este paso, se realiza la clonación de la plantilla del componente y su inserción en el elemento DOM. El contenido existente, si lo hubiera, será eliminado.

Instantiate a ViewModel if any- En este paso, se crea una instancia de ViewModel. Si ViewModel se proporciona como una función de constructor, entonces KO llama.

new ViewModelName(params)

Si ViewModel se proporciona en formato de función de fábrica, es decir, createViewModel, entonces KO llama.

createViewModel(params, yourcomponentInfo)

Aquí yourcomponentInfo.element es el elemento donde se inserta la plantilla.

Bind ViewModel to view- En esta etapa, ViewModel está vinculado a View. Si no se proporciona ViewModel, la vinculación se realiza con los parámetros mencionados en la vinculación de componentes.

Now component is ready- En esta etapa, el componente está listo y en funcionamiento. El componente vigila los parámetros que son observables, si los hay, para escribir los valores modificados.

Dispose the ViewModel if the component is lost- Se llama a la función de eliminación de ViewModel, si el valor del nombre del enlace del componente se cambia de forma observable o si algún enlace de flujo de control elimina el contenedor del elemento DOM, que estaba destinado a contener la salida del componente. La eliminación tiene lugar justo antes de que se elimine cualquier contenedor de elementos de DOM.

Example

Echemos un vistazo al siguiente ejemplo que demuestra el uso del enlace de componentes.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Component binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <h4>Component binding without parameters</h4>
      <div data-bind = 'component: "calculate-sum"'></div>

      <h4>Component binding passing parameters</h4>
      <div data-bind = 'component: {
         name: "calculate-sum",
         params: { number1: 2, number2: 3 }
      }'></div>

      <script>
         ko.components.register('calculate-sum', {
            
            viewModel: function(params) {
               this.number1 = ko.observable(params && params.number1);
               this.number2 = ko.observable(params && params.number2);

               this.result = ko.computed(function() {
                  var sum = Number(this.number1()) + Number(this.number2());
                  if ( isNaN(sum) )
                  sum = 0;
                  return sum;
               },this);
            },
            
            template: 'Enter Number One: <input data-bind = "value: number1" /> <br> <br>'+
               ' Enter Number Two: <input data-bind = "value: number2" /> <br> <br>'+
               ' Sum  = <span data-bind = "text: result" />'
         });

         ko.applyBindings();
      </script>
      
   </body>
</html>

Output

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

Guarde el código anterior en component-bind.htm archivo.
Abra este archivo HTML en un navegador.
Ingrese los números en ambos cuadros de texto y observe que se calcula la suma.

Observaciones

Componentes de plantilla solamente

Los componentes se pueden crear sin ViewModel. El componente puede formar parte de una plantilla que se muestra a continuación.

ko.components.register('my-component', {
   template: '<div data-bind = "text: productName"></div>'
});

Y DOM se verá así:

<div data-bind = 'component: {
   name: "my-component",
   params: { productName: someProduct.name }
}'></div>

Uso de enlace de componentes sin elemento contenedor DOM

Puede haber una situación en la que no sea posible insertar un componente en el elemento DOM. El enlace esencial aún se puede realizar con la ayuda de una sintaxis sin contenedor basada en las etiquetas de comentarios que se muestran a continuación.

<! - ko -> y <! - / ko -> funcionan como marcadores de inicio y fin, lo que la convierte en una sintaxis virtual y enlaza los datos como si fuera un contenedor real.

Gestión y eliminación de memoria

La función de eliminación se puede agregar opcionalmente como parte de ViewModel. Si se incluye esta función, se invocará siempre que se pierda el componente o se elimine el elemento contenedor. Es una buena práctica utilizar la función de eliminación para liberar recursos ocupados por objetos no deseados, que no se pueden recolectar como basura de forma predeterminada. A continuación se muestran algunos ejemplos:

El método setInterval seguirá ejecutándose hasta que se borre explícitamente. clearInterval (identificador) se utiliza para detener este proceso.
ko. las propiedades calculadas deben eliminarse explícitamente. De lo contrario, es posible que sigan recibiendo notificaciones de sus observables subyacentes. La eliminación manual se puede evitar utilizando funciones puramente calculadas.
Asegúrese de usar el método dispose () en la suscripción; de lo contrario, seguirá activando los cambios hasta que se elimine.
Los controladores de eventos personalizados creados en elementos DOM y creados dentro de createViewModel deben eliminarse.

↰ Previous page