Referencia de ui-bind: cada comando, opción y atributo

jComponent 20 · jcomponent@20 jcomponentfrontendbindingreference Ejecutada con jComponent 20

<ui-bind> es el elemento que aplica comandos al DOM cuando cambia el valor de su ruta. Esta página enumera lo que hace cada comando, las opciones que deciden cuándo se ejecuta y los atributos que eligen qué elemento cambia.

El formato es config="command:expression;command:expression". En una expresión value es el valor de la ruta y element (también el) es el elemento que se cambia. Un comando puede tener un selector (text .name:value lo aplica a los elementos .name dentro) y attr toma primero el nombre del atributo (attr title:value).

Comandos que cambian el elemento

Comando	Qué hace
`text:expr`	establece el texto; un valor vacío muestra el texto `empty`
`html:expr`	establece el HTML interno (escápelo usted mismo)
`value:expr`	establece el valor de un control de formulario
`title:expr`, `href:expr`, `src:expr`	establece ese atributo
`attr name:expr`	establece cualquier atributo
`.class:expr`	agrega la clase cuando la expresión es verdadera y la elimina cuando es falsa
`show:expr` / `hide:expr`	agrega o elimina la clase `hidden`
`visible:expr` / `invisible:expr`	agrega o elimina la clase `invisible` (el elemento mantiene su espacio)
`checked:expr`	marca o desmarca el `input` en el interior
`disabled:expr` / `enabled:expr`	deshabilita o habilita los controles internos (`input`, `select`, `textarea`, `button`) y los elementos `ui-component` internos
`required:expr`	establece la opción `required` de los elementos `ui-component` en el interior (no toca un `input` simple)
`template`	representa la plantilla Tangular del elemento (consulte la receta de la plantilla)
`exec:path` / `refresh:path`	llama a la función en esa ruta con el valor, la ruta y el elemento, para cada `SET` de la ruta del binder

show y hide se ejecutan primero, luego visible y invisible, y text, html y template se ejecutan por último, de modo que la visibilidad del elemento ya se conoce cuando se escribe el contenido. text, html y template solo se escriben mientras el elemento está visible, a menos que forcerender:true esté en la misma configuración: entonces se escriben incluso cuando el elemento está oculto.

Opciones: cuando se ejecutan los comandos

Opción	Qué hace
`changes`	omite la actualización cuando el valor es el mismo que el último
`strict`	solo se ejecuta cuando la ruta del cuaderno cambia, no cuando cambia una ruta secundaria (`user.name` no ejecuta un cuaderno de `user`)
`track:a,b`	sólo se ejecuta cuando una de esas rutas cambió (una carpeta de `user` que rastrea `user.name` ignora `user.age`); se ejecuta nuevamente para cada `SET` de una ruta rastreada, incluso con el mismo valor
`once`	se ejecuta una vez y luego se elimina la carpeta
`check:path`	llama a la función en esa ruta con `(value, path, element)`; los comandos solo se ejecutan cuando devuelve verdadero
`delay:ms`	espera tantos milisegundos y se procesa una vez, incluso si el valor cambió varias veces mientras tanto (100 cuando no se proporciona ningún valor)
`empty:text`	el texto que se muestra en lugar de un valor vacío (`---` cuando no se proporciona ningún texto)
`format:pattern`	formatea el valor de `text`, `html`, `value`, `attr`, `title`, `href` y `src` con `String.format`
`class:name`	agrega esa clase al elemento `ui-bind` una vez, después del primer renderizado
`assign:path`	almacena la instancia de carpeta en esa ruta
`helpers:path`	el objeto en esa ruta proporciona los ayudantes de la plantilla: con `helpers:hh` y `hh = { shout: fn }`, la plantilla puede usar `{{ value`	shout() }}

Atributos: qué elemento cambia

Por defecto los comandos cambian el elemento ui-bind. Estos atributos eligen otro:

element="#target" cualquier elemento de la página (un selector jQuery)
child=".inner" un elemento dentro del ui-bind
parent=".card" el ancestro más cercano que coincide

La ruta puede comenzar con ! (path="!user.nick"): el encuadernador ignora los momentos en los que el valor es null o undefined. El nombre de un comando también puede comenzar con ! o ~: el prefijo se acepta e ignora, el comando funciona como sin él.

Comandos de atributos

Utilice un atributo por comando: escriba title:value y alt:value como dos comandos.

public/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<ui-bind path="user.age" config="visible:value > 17" id="visible"><span>adult</span></ui-bind>
	<ui-bind path="user.age" config="invisible:value > 17" id="invisible"><span>minor</span></ui-bind>
	<ui-bind path="user.name" config="text:value;class:marked" id="classonce"></ui-bind>
	<ui-bind path="user.name" config="text:(window.counter_changes = (window.counter_changes || 0) + 1) && value;changes" id="changes"></ui-bind>
	<ui-bind path="user" config="text:(window.counter_strict = (window.counter_strict || 0) + 1);strict" id="strict"></ui-bind>
	<ui-bind path="user" config="text:value.name;track:user.name" id="track"></ui-bind>
	<ui-bind path="user.name" config="text:value;once" id="once"></ui-bind>
	<ui-bind path="user.name" config="text:value;check:isready" id="check"></ui-bind>
	<ui-bind path="user.name" config="exec:onname" id="exec"></ui-bind>
	<ui-bind path="user.name" config="text:value;assign:binders.main" id="assign"></ui-bind>
	<ui-bind path="!user.nick" config="text:value" id="notnull"></ui-bind>
	<ui-bind path="user.name" config="text:value" element="#target" id="element"></ui-bind>
	<div id="target"></div>
	<ui-bind path="user.name" config="text:value" child=".inner" id="child"><b class="inner"></b></ui-bind>
	<ui-bind path="user.name" config="text .a:value;text .b:value.toUpperCase()" id="selector"><i class="a"></i><i class="b"></i></ui-bind>
	<ui-bind path="user.name" config="show:false;text:value;forcerender:true" id="force"></ui-bind>
	<ui-bind path="user.name" config="show:false;text:value" id="noforce"></ui-bind>
	<ui-bind path="user.admin" config="required:value;disabled:!value" id="flags"><input type="text" /></ui-bind>
	<ui-bind path="user.admin" config="checked:value" id="checked"><input type="checkbox" /></ui-bind>

	<ui-bind path="user.name" config="title+alt:value" id="clone"></ui-bind>
	<ui-bind path="user" config="text:(window.counter_track = (window.counter_track || 0) + 1);track:user.name" id="track2"></ui-bind>
	<ui-bind path="user.name" config="template;helpers:hh" id="helpers"><script type="text/html"><b>{{ value | shout() }}</b></script></ui-bind>
	<ui-bind path="user.none" config="text:value;empty" id="emptydef"></ui-bind>
	<ui-bind path="user.name" config="focus"><input type="text" id="f1" /></ui-bind>
	<ui-bind path="user.name" config="!text:value" id="bang"></ui-bind>
	<ui-bind path="user.name" config="~text:value" id="tilde"></ui-bind>
	<ui-bind path="user.name" config="text:el.attr('id') + '/' + element.attr('id')" id="elvar"></ui-bind>
	<div class="card"><ui-bind path="user.name" config="attr data-n:value" parent=".card" id="parentbind"></ui-bind></div>

	<script>
		window.hh = { shout: s => String(s).toUpperCase() };
		window.isready = function(value, path, element) {
			return value !== 'blocked';
		};
		window.exec_log = [];
		window.onname = function() {
			window.exec_log.push(Array.prototype.slice.call(arguments).map(a => typeof a === 'object' ? (a && a.nodeType ? 'element' : a && a.path ? 'path' : 'object') : String(a)).join('|'));
		};
		SET('user', { name: 'Ann', age: 30, admin: false });
	</script>

</body>
</html>

Pruébalo en tu navegador

Edita el ejemplo y ejecútalo. Se ejecuta en un marco aislado de tu navegador; no se envía nada a nuestro servidor.

Código

Vista previa