Ui-bind referencia: minden parancs, opció és attribútum

jComponent 20 · jcomponent@20 jcomponentfrontendbindingreference Futtatva a jComponent 20-szal

A <ui-bind> az a elem, amely parancsokat alkalmaz a DOM-ra, amikor az útja értéke megváltozik.Ez az oldal felsorolja, hogy mit tesz minden parancs, milyen opciókat határoz ha fut, és milyen attribútumokat választ melyik elemet változtat.

A formátum config="command:expression;command:expression". Egy kifejezésben a value az útvonal értéke, az element (és el) pedig a módosított elem. Egy parancsnak lehet szelektora (a text .name:value a benne lévő .name elemekre alkalmazza), az attr pedig először az attribútum nevét veszi (attr title:value).

Az elemet módosító parancsok

Parancs	Mit csinál
`text:expr`	beállítja a szöveget; üres érték esetén az `empty` szövegét mutatja
`html:expr`	beállítja a belső HTML-t (az escape-elést magad végezd)
`value:expr`	beállítja egy űrlapvezérlő értékét
`title:expr`, `href:expr`, `src:expr`	beállítja azt az attribútumot
`attr name:expr`	beállít bármilyen attribútumot
`.class:expr`	hozzáadja az osztályt, ha a kifejezés igaz, és eltávolítja, ha hamis
`show:expr` / `hide:expr`	hozzáadja vagy eltávolítja a `hidden` osztályt
`visible:expr` / `invisible:expr`	hozzáadja vagy eltávolítja az `invisible` osztályt (az elem megtartja a helyét)
`checked:expr`	bejelöli vagy kijelöletlenné teszi a benne lévő `input` elemet
`disabled:expr` / `enabled:expr`	letiltja vagy engedélyezi a benne lévő vezérlőket (`input`, `select`, `textarea`, `button`) és a benne lévő `ui-component` elemeket
`required:expr`	beállítja a benne lévő `ui-component` elemek `required` opcióját (a sima `input` elemet nem érinti)
`template`	megjeleníti az elem Tangular sablonját (lásd a sablon receptet)
`exec:path` / `refresh:path`	meghívja az adott útvonalon lévő függvényt az értékkel, az útvonallal és az elemmel, a binder útvonalának minden `SET` műveleténél

A show és a hide fut le először, utána a visible és az invisible, a text, a html és a template pedig utoljára, hogy az elem láthatósága már ismert legyen, amikor a tartalom íródik. A text, a html és a template csak akkor íródik, amíg az elem látható, hacsak a forcerender:true nincs ugyanabban a konfigurációban: akkor akkor is íródnak, ha az elem rejtett.

Opciók: mikor futnak a parancsok

Opció	Mit csinál
`changes`	kihagyja a frissítést, ha az érték megegyezik az utolsóval
`strict`	csak akkor fut, ha maga a binder útvonala változott, nem akkor, ha egy gyermekútvonal (a `user.name` nem futtat `user` binderét)
`track:a,b`	csak akkor fut, ha az egyik ilyen útvonal változott (a `user.name` útvonalat követő `user` binder figyelmen kívül hagyja a `user.age` útvonalat); a követett útvonal minden `SET` műveleténél újra fut, azonos értéknél is
`once`	egyszer fut, majd a binder eltávolításra kerül
`check:path`	meghívja az adott útvonalon lévő függvényt `(value, path, element)` paraméterekkel; a parancsok csak akkor futnak, ha true értéket ad vissza
`delay:ms`	ennyi ezredmásodpercet vár, és egyszer rajzol, akkor is, ha az érték közben többször változott (100, ha nincs érték megadva)
`empty:text`	az üres érték helyett megjelenített szöveg (`---`, ha nincs szöveg megadva)
`format:pattern`	formázza a `text`, `html`, `value`, `attr`, `title`, `href` és `src` értékét a `String.format` segítségével
`class:name`	hozzáadja ezt az osztályt az `ui-bind` elemhez egyszer, az első megjelenítés után
`assign:path`	az adott útvonalon tárolja a binder példányát
`helpers:path`	az adott útvonalon lévő objektum biztosítja a sablon segédeit: a `helpers:hh` és a `hh = { shout: fn }` esetén a sablon használhatja a `{{ value`	shout() }} kifejezést

Attribútumok: melyik elem változik

Alapértelmezés szerint a parancsok az ui-bind elemet változtatják. Ezek az attribútumok másikat választanak:

element="#target" az oldal bármely eleme (jQuery szelektor)
child=".inner" egy elem az ui-bind belsejében
parent=".card" a legközelebbi illeszkedő ős

Az útvonal kezdődhet ! jellel (path="!user.nick"): a binder ilyenkor figyelmen kívül hagyja azokat a pillanatokat, amikor az érték null vagy undefined. A parancs neve is kezdődhet ! vagy ~ jellel: az előtagot elfogadja és figyelmen kívül hagyja, a parancs úgy működik, mintha nem lenne.

A parancsok tulajdonsága

Parancsonként egy attribútumot használj: a title:value és az alt:value két parancsként írd.

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>

Próbáld ki a böngésződben

Szerkeszd a példát, és futtasd. A böngésződ egy izolált keretében fut; semmi nem kerül a szerverünkre.

Kód

Előnézet