ui-bind referentie: elke opdracht, optie en attribute

jComponent 20 · jcomponent@20 jcomponentfrontendbindingreference Uitgevoerd met jComponent 20

<ui-bind> is het element dat bevelen aan de DOM toevoegt wanneer de waarde van de route verandert. deze pagina geeft een lijst met wat elk bevel doet, de opties die beslissen als het loopt en de attributen die kiezen welk element het verandert

Het formaat is config="command:expression;command:expression". In een expressie is value de waarde van het pad en element (ook el) het element dat wordt gewijzigd. Een commando kan een selector hebben (text .name:value past het toe op de elementen .name erin) en attr neemt eerst de attribuutnaam (attr title:value).

Commando's die het element wijzigen

Commando	Wat het doet
`text:expr`	zet de tekst; een lege waarde toont de tekst van `empty`
`html:expr`	zet de inner HTML (escape die zelf)
`value:expr`	zet de waarde van een formulierbesturingselement
`title:expr`, `href:expr`, `src:expr`	zet dat attribuut
`attr name:expr`	zet elk attribuut
`.class:expr`	voegt de klasse toe wanneer de expressie waar is en verwijdert haar wanneer onwaar
`show:expr` / `hide:expr`	voegt de klasse `hidden` toe of verwijdert haar
`visible:expr` / `invisible:expr`	voegt de klasse `invisible` toe of verwijdert haar (het element behoudt zijn ruimte)
`checked:expr`	vinkt de `input` erin aan of uit
`disabled:expr` / `enabled:expr`	schakelt de besturingselementen erin (`input`, `select`, `textarea`, `button`) en de `ui-component`-elementen erin uit of in
`required:expr`	zet de optie `required` van de `ui-component`-elementen erin (een gewone `input` blijft onaangeroerd)
`template`	rendert het Tangular-sjabloon van het element (zie het sjabloonrecept)
`exec:path` / `refresh:path`	roept de functie op dat pad aan met de waarde, het pad en het element, bij elke `SET` van het pad van de binder

show en hide draaien eerst, dan visible en invisible, en text, html en template het laatst, zodat de zichtbaarheid van het element al bekend is wanneer de inhoud wordt geschreven. text, html en template worden alleen geschreven zolang het element zichtbaar is, tenzij forcerender:true in dezelfde configuratie staat: dan worden ze ook geschreven als het element verborgen is.

Opties: wanneer de commando's draaien

Optie	Wat het doet
`changes`	slaat de update over wanneer de waarde gelijk is aan de vorige
`strict`	draait alleen wanneer het pad van de binder zelf is veranderd, niet wanneer een kindpad is veranderd (`user.name` voert geen binder van `user` uit)
`track:a,b`	draait alleen wanneer een van die paden is veranderd (een binder van `user` die `user.name` volgt, negeert `user.age`); draait opnieuw bij elke `SET` van een gevolgd pad, ook met dezelfde waarde
`once`	draait eenmaal en daarna wordt de binder verwijderd
`check:path`	roept de functie op dat pad aan met `(value, path, element)`; de commando's draaien alleen wanneer die true teruggeeft
`delay:ms`	wacht zoveel milliseconden en rendert eenmaal, ook als de waarde ondertussen meermaals is veranderd (100 wanneer geen waarde is opgegeven)
`empty:text`	de tekst die wordt getoond in plaats van een lege waarde (`---` wanneer geen tekst is opgegeven)
`format:pattern`	formatteert de waarde van `text`, `html`, `value`, `attr`, `title`, `href` en `src` met `String.format`
`class:name`	voegt die klasse eenmaal toe aan het element `ui-bind`, na de eerste render
`assign:path`	slaat de binderinstantie op dat pad op
`helpers:path`	het object op dat pad levert de helpers van het sjabloon: met `helpers:hh` en `hh = { shout: fn }` kan het sjabloon `{{ value`	shout() }} gebruiken

Attributen: welk element verandert

Standaard wijzigen de commando's het element ui-bind. Deze attributen kiezen een ander:

element="#target" elk element van de pagina (een jQuery-selector)
child=".inner" een element binnen het ui-bind
parent=".card" de dichtstbijzijnde voorouder die overeenkomt

Het pad kan beginnen met ! (path="!user.nick"): de binder negeert dan de momenten waarop de waarde null of undefined is. Een commandonaam kan ook beginnen met ! of ~: het voorvoegsel wordt geaccepteerd en genegeerd, het commando werkt als zonder.

Attribute Commands

Gebruik één attribuut per commando: schrijf title:value en alt:value als twee commando’s.

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>

Probeer het in je browser

Bewerk het voorbeeld en voer het uit. Het draait in een geïsoleerd frame in je browser; er wordt niets naar onze server gestuurd.

Code

Voorbeeld