Links

Los Links de Web Component Factory permiten asociar cualquier atributo de un componente a cualquier atributo de otro componente, incluida la variante.

Cuando se establece un Link entre dos componentes, al cambiar el atributo del componente origen, cambia el atributo del componente destino sin necesidad de ninguna acción adicional.

Se pueden establecer una cantidad ilimitada de links, incluyendo múltiples links para un mismo atributo, múltiples links entre dos componentes y links en cascada: el atributo del componente origen modifica el atributo del componente destino, que a su vez es origen de un nuevo link que modifica un tercer componente.

Los links son una forma extremadamente sencilla y eficiente de generar sofisticados comportamientos en base a componentes creados con Web Component Factory.

setLinkData(tagId, linkData)

Esta función de la API de Web Component Factory permite establecer de una sola vez un conjunto de relaciones entre los atributos de un componente origen, con los atributos de uno o más componentes destino. Como forma parte de la API, debe ser invocada como método de la variable global wcf_allInstances.

Parametros

• tagId: component instance ID
• linkData: los datos para el link, según se describe en el apartado siguiente

Retorna: true if linkData es un array y hay una instancia con ese id. False en cualquier otro caso

linkData

linkData es un array de objetos, cada uno de ellos con la información de un link específico. Las propiedades de cada objeto que integra el array son las siguientes:

• oriAttr: el atributo de la instancia de origen, que al ser modificado dispara el link
• oriValue: el valor del atributo oriAttr que al ser modificado dispara el link
• destTagId: el id de la instancia del componente destino del link (puede ser el mismo que el original, siempre que el atributo de destino sea distinto que oriAttr)
• destAttr: el atributo que recibirá el link
• destValue: el valor a asignar al atributo destino destAttr. Puede ser cualquier valor, no guarda ninguna relación con el valor del atributo de origen.

Por ejemplo, el siguiente código establece un vínculo simple entre las variantes de dos componentes, para que cuando el de origen tome el valor 1, el de destino tome el valor 2.

let linkData = [{oriAttr:'variant'  , oriValue:'1'  , destTagId:'comp-destino', destAttr:'variant', destValue:'2'}];
wcf_allInstances.setLinkData('comp-subpie-chat', linkData);

En este ejemplo, un componente usa links para vincular dos switches, de modo que al prender el de origen se apague el de destino, y viceversa, al apagar el de origen se prenda el de destino.

let linkData = [{oriAttr:'estadoactivo'  , oriValue:'on'  , destTagId:'comp-de-origen', destAttr:'estadoinactivo', destValue:'off'}];
linkData[1] = {oriAttr:'estadoactivo'  , oriValue:'off'  , destTagId:'comp-de-origen', destAttr:'estadoinactivo', destValue:'on'};
wcf_allInstances.setLinkData('comp-de-origen', linkData);

Loops

Los links son una herramienta poderosa, porque con un array se puede configurar todo el comportamiento de un conjunto de componentes. Pero las cadenas de links donde el componente 1 modifica al componente 2 y el dos al 3 pueden tener en algún lugar una especificación donde el 3 modifica al 1 de modo que la cadena empiece nuevamente y se genere un loop infinito.

La API de WCF detecta los loops sencillos, donde un componente se modifica de forma errónea a sí mismo, pero no verifica si en las cadenas de links se generan loops, por lo que el programador deberá verificar, cuando genera los dataLinks, que estos no incluyan condiciones que generen loops infinitos.