Ui-bind: fiecare comandă, opțiune și atribut

jComponent 20 · jcomponent@20 jcomponentfrontendbindingreference Executată cu jComponent 20

<ui-bind> este elementul care aplică comandele DOM-ului atunci când se schimbă valoarea căii sale.Această pagină prezintă ceea ce face fiecare comandă, opțiunile care decid când funcționează și atributele care alege care element se schimbã.

Formatul este config="command:expression;command:expression". Într-o expresie value este valoarea căii, iar element (și el) este elementul care se schimbă. O comandă poate avea un selector (text .name:value îl aplică elementelor .name dinăuntru), iar attr ia mai întâi numele atributului (attr title:value).

Comenzi care schimbă elementul

Comandă	Ce face
`text:expr`	setează textul; o valoare goală afișează textul `empty`
`html:expr`	setează HTML-ul interior (fă singur escape-ul)
`value:expr`	setează valoarea unui control de formular
`title:expr`, `href:expr`, `src:expr`	setează acel atribut
`attr name:expr`	setează orice atribut
`.class:expr`	adaugă clasa când expresia este adevărată și o elimină când este falsă
`show:expr` / `hide:expr`	adaugă sau elimină clasa `hidden`
`visible:expr` / `invisible:expr`	adaugă sau elimină clasa `invisible` (elementul își păstrează locul)
`checked:expr`	bifează sau debifează `input`-ul dinăuntru
`disabled:expr` / `enabled:expr`	dezactivează sau activează controalele dinăuntru (`input`, `select`, `textarea`, `button`) și elementele `ui-component` dinăuntru
`required:expr`	setează opțiunea `required` a elementelor `ui-component` dinăuntru (nu atinge un `input` simplu)
`template`	redă șablonul Tangular al elementului (vezi rețeta șabloanelor)
`exec:path` / `refresh:path`	apelează funcția de la acea cale cu valoarea, calea și elementul, la fiecare `SET` al căii binder-ului

show și hide rulează primele, apoi visible și invisible, iar text, html și template ultimele, astfel încât vizibilitatea elementului să fie deja cunoscută când se scrie conținutul. text, html și template se scriu doar cât timp elementul este vizibil, cu excepția cazului în care forcerender:true este în aceeași configurație: atunci se scriu chiar și când elementul este ascuns.

Opțiuni: când rulează comenzile

Opțiune	Ce face
`changes`	sare peste actualizare când valoarea este aceeași cu ultima
`strict`	rulează doar când s-a schimbat chiar calea binder-ului, nu când s-a schimbat o cale copil (`user.name` nu rulează un binder de `user`)
`track:a,b`	rulează doar când s-a schimbat una dintre acele căi (un binder de `user` care urmărește `user.name` ignoră `user.age`); rulează din nou la fiecare `SET` al unei căi urmărite, chiar și cu aceeași valoare
`once`	rulează o dată și apoi binder-ul este eliminat
`check:path`	apelează funcția de la acea cale cu `(value, path, element)`; comenzile rulează doar când returnează true
`delay:ms`	așteaptă atâtea milisecunde și redă o dată, chiar dacă valoarea s-a schimbat de mai multe ori între timp (100 când nu se dă nicio valoare)
`empty:text`	textul afișat în locul unei valori goale (`---` când nu se dă niciun text)
`format:pattern`	formatează valoarea lui `text`, `html`, `value`, `attr`, `title`, `href` și `src` cu `String.format`
`class:name`	adaugă acea clasă elementului `ui-bind` o dată, după prima redare
`assign:path`	stochează instanța binder-ului la acea cale
`helpers:path`	obiectul de la acea cale furnizează ajutoarele șablonului: cu `helpers:hh` și `hh = { shout: fn }`, șablonul poate folosi `{{ value`	shout() }}

Atribute: ce element se schimbă

Implicit comenzile schimbă elementul ui-bind. Aceste atribute aleg altul:

element="#target" orice element al paginii (un selector jQuery)
child=".inner" un element din interiorul ui-bind
parent=".card" cel mai apropiat strămoș care se potrivește

Calea poate începe cu ! (path="!user.nick"): binder-ul ignoră atunci momentele în care valoarea este null sau undefined. Numele unei comenzi poate începe și cu ! sau ~: prefixul este acceptat și ignorat, comanda funcționează ca fără el.

Atribut comandă

Folosește un atribut pe comandă: scrie title:value și alt:value ca două comenzi.

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>

Încearcă în browserul tău

Editează exemplul și rulează-l. Rulează într-un cadru izolat din browserul tău; nimic nu este trimis către serverul nostru.

Cod

Previzualizare