ui-bind referens: varje kommandot, alternativ och attribut

jComponent 20 · jcomponent@20 jcomponentfrontendbindingreference Körd med jComponent 20

<ui-bind> är det element som tillämpar kommandon på DOM när värdet av sin väg ändras.Detta sida listar vad varje kommando gör, de alternativ som bestämmer när det körs och attribut som väljer vilket element det ändrar.

Formatet är config="command:expression;command:expression". I ett uttryck är value sökvägens värde och element (även el) elementet som ändras. Ett kommando kan ha en selektor (text .name:value tillämpar det på elementen .name inuti) och attr tar attributnamnet först (attr title:value).

Kommandon som ändrar elementet

Kommando	Vad det gör
`text:expr`	sätter texten; ett tomt värde visar texten `empty`
`html:expr`	sätter inre HTML (gör escape själv)
`value:expr`	sätter värdet på en formulärkontroll
`title:expr`, `href:expr`, `src:expr`	sätter det attributet
`attr name:expr`	sätter vilket attribut som helst
`.class:expr`	lägger till klassen när uttrycket är sant och tar bort den när det är falskt
`show:expr` / `hide:expr`	lägger till eller tar bort klassen `hidden`
`visible:expr` / `invisible:expr`	lägger till eller tar bort klassen `invisible` (elementet behåller sitt utrymme)
`checked:expr`	bockar i eller ur `input` inuti
`disabled:expr` / `enabled:expr`	inaktiverar eller aktiverar kontrollerna inuti (`input`, `select`, `textarea`, `button`) och elementen `ui-component` inuti
`required:expr`	sätter alternativet `required` för elementen `ui-component` inuti (rör inte en vanlig `input`)
`template`	renderar elementets Tangular-mall (se mallreceptet)
`exec:path` / `refresh:path`	anropar funktionen på den sökvägen med värdet, sökvägen och elementet, vid varje `SET` av bindarens sökväg

show och hide körs först, sedan visible och invisible, och text, html och template körs sist, så att elementets synlighet redan är känd när innehållet skrivs. text, html och template skrivs bara medan elementet är synligt, om inte forcerender:true finns i samma konfiguration: då skrivs de även när elementet är dolt.

Alternativ: när kommandona körs

Alternativ	Vad det gör
`changes`	hoppar över uppdateringen när värdet är detsamma som det senaste
`strict`	körs bara när bindarens egen sökväg ändrats, inte när en barnsökväg ändrats (`user.name` kör inte en bindare för `user`)
`track:a,b`	körs bara när en av de sökvägarna ändrats (en bindare för `user` som spårar `user.name` ignorerar `user.age`); den körs igen för varje `SET` av en spårad sökväg, även med samma värde
`once`	körs en gång och sedan tas bindaren bort
`check:path`	anropar funktionen på den sökvägen med `(value, path, element)`; kommandona körs bara när den returnerar true
`delay:ms`	väntar så många millisekunder och renderar en gång, även om värdet ändrats flera gånger under tiden (100 när inget värde anges)
`empty:text`	texten som visas i stället för ett tomt värde (`---` när ingen text anges)
`format:pattern`	formaterar värdet för `text`, `html`, `value`, `attr`, `title`, `href` och `src` med `String.format`
`class:name`	lägger till den klassen på elementet `ui-bind` en gång, efter den första renderingen
`assign:path`	lagrar bindarinstansen på den sökvägen
`helpers:path`	objektet på den sökvägen tillhandahåller mallens hjälpare: med `helpers:hh` och `hh = { shout: fn }` kan mallen använda `{{ value`	shout() }}

Attribut: vilket element som ändras

Som standard ändrar kommandona elementet ui-bind. De här attributen väljer ett annat:

element="#target" vilket element som helst på sidan (en jQuery-selektor)
child=".inner" ett element inuti ui-bind
parent=".card" den närmaste förfadern som matchar

Sökvägen kan börja med ! (path="!user.nick"): bindaren ignorerar då de ögonblick då värdet är null eller undefined. Ett kommandonamn kan också börja med ! eller ~: prefixet accepteras och ignoreras, kommandot fungerar som utan det.

Attribut kommandon

Använd ett attribut per kommando: skriv title:value och alt:value som två kommandon.

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>

Prova det i din webbläsare

Redigera exemplet och kör det. Det körs i en isolerad ram i din webbläsare; ingenting skickas till vår server.

Kod

Förhandsvisning