Saltar al contenido

¿Cómo Crear Bindings Personalizados en Knockout.js?

5 junio, 2019

Knockout es una biblioteca de JavaScript que le ayuda a crear interfaces de usuario ricas y con capacidad de respuesta con un modelo de datos subyacente limpio. ¿Cómo Crear Bindings Personalizados en Knockout.js?

KO puede ayudarlo a implementarlo de forma más sencilla y mantenible, siempre que tenga secciones de la interfaz de usuario que se actualicen dinámicamente.

¿Cómo Crear Bindings Personalizados en Knockout.js?

Para crear el binding personalizado, necesitamos agregar una propiedad con su nombre de enlace personalizado y asignar un objeto con dos funciones de devolución de llamada.

ko.bindingHandlers.myCustomBindingName = {
init: function (elemento, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
}
actualizar: función (elemento, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
}
}

Aquí puede ver que hemos agregado una propiedad myCustomBindingName asignada con un objeto que tiene inicia y actualiza las devoluciones de llamada. Veamos los callbacks en detalle.

Devolución de Llamada

La función de devolución de llamada de inicio se ejecutará cuando se aplique el enlace por primera vez. En esta devolución de llamada.

Podemos tener la configuración inicial necesaria para el enlace personalizado, como adjuntar eventos, configurar el estado inicial de las variables, etc.

Devolución de Llamada de Actualización

La función de devolución de llamada de actualización se llamará siempre que se cambie el observable asociado. Al vincular su controlador de enlace personalizado con el elemento.

Si ha asociado o asignado un observable a su controlador de enlace personalizado, la devolución de llamada de actualización se ejecutará siempre que cambie el observable asociado o asignado.

Por ejemplo, tiene un controlador de enlace personalizado, diga “animateItem” que hace alguna animación cada vez que se agrega un elemento a la colección.

El controlador de enlace animateItem acepta un observable que decide si el elemento agregado debe animarse en la pantalla o no en función del valor verdadero o falso observable.

Cada vez que actualice lo observable, la devolución de llamada de actualización de su devolución de llamada de enlace será llamada con el valor actualizado.

Parámetros de las Funciones de Devolución de Llamada

Estas funciones de devolución de llamada de inicio y actualización tienen el mismo conjunto de parámetros. Son element, valueAccessor, allBindingsAccessor, viewModel y bindingContext.

Ejemplo
Vamos a discutir el enlace personalizado con un ejemplo. Crearemos un enlace personalizado donde podamos mostrar el registro de cambios para un cuadro de entrada.

<p> Cambie este valor: <inputdata-bind = "value: logEntry, valueUpdate: 'keyup'" /> </p>
<divdata-bind = "yourBindingName: logEntry">
<ul>
</ul>
</div>

En esta vista de ejemplo, tenemos un elemento de entrada vinculado al observable logEntry asignado / asociado con el enlace de valor. Y tenemos un div al que hemos vinculado nuestro enlace personalizado “YourCoustomBinding“.

Dado que hemos asociado el logEntry observable con nuestra oferta personalizada, la función de devolución de llamada de actualización se ejecutará siempre que se modifique el texto en el cuadro de entrada.

ko.bindingHandlers.yourBindingName = {
init: function (elemento, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// Configurar los eventos, variables ..
$ (elemento) .css ("background-color", "rgb (228, 222, 222)");
}
actualizar: función (elemento, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var text = ko.unwrap (valueAccessor ()); // Obteniendo el texto del registro de actualización
$ ('ul'). append ('<il> El nuevo texto es:' + texto + '</il>'); // Agregando en la ul como il.
}
}
var viewModel = {logChange: ko.observable ("Escriba algo")};
ko.applyBindings (viewModel);

En la función de devolución de llamada de inicio, como configuración inicial, estamos configurando el color de fondo para el contenedor de registro de cambios.

Cuando empieces a cambiar el texto, se llamará la actualización de devolución de llamada. En la devolución de llamada de actualización.

Estamos desenvolviendo el valueAccessor para obtener el valor pasado a nuestro enlace personalizado. Luego estamos agregando el texto modificado al elemento ul como un elemento il.